Web 本地存储
Web Storage API
关键对象
- window.sessionStorage对象用于区域存储；
- window.localStorage对象用于本地存储。
特点
- 数据的设置和读取比较方便。
- 容量较大，sessionStorage大约为5MB，localStorage大约为20MB。
- 只能存储字符串，若想要存储JSON对象，则可以使用window.JSON.stringify()或者parse()进行序列化和反序列化编码
区别
sessionStorage的存储周期只有一次会话(关闭浏览器就会消失)
localStorage的存储周期是永久的(关闭浏览器数据还在)，除非用户手动清除浏览器缓存文件
属性和方法
window.localStorage.setItem('键','值')
window.sessionStorage.setItem('键','值')
localStorage简单数据存储实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="username"> <button id="setData">设置数据</button> <button id="getData">获取数据</button> <button id="delData">删除数据</button> <script> var username = document.querySelector('#username'); // 单击“设置数据”按钮，设置数据 document.querySelector('#setData').onclick = function () { var val = username.value; // 获取username里面的值 //window.sessionStorage.setItem('username', val);//一个会话，关闭网页后，数据不会保存 window.localStorage.setItem('username',val)//只要不主动清除，一直都在 }; // 单击“获取数据”按钮，获取数据 document.querySelector('#getData').onclick = function () { // alert(window.sessionStorage.getItem('username')); alert(window.localStorage.getItem('username')) }; // 单击“删除数据”按钮，删除数据 document.querySelector('#delData').onclick = function () { // window.sessionStorage.removeItem('username'); window.localStorage.removeItem('username') }; if (window.sessionStorage) { // 浏览器支持sessionStorage } else if (window.localStorage) { // 浏览器支持localStorage } </script> </script> </body> </html>
localStorage在Vue中的实例(标签记录器)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" integrity="sha384-t1tHLsbM7bYMJCXlhr0//00jSs7ZhsAhxgm191xFsyzvieTMCbUWKMhFg9I6ci8q" crossorigin="anonymous"></script> <style> body { padding: 0; margin: 0; } .divcenter { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 50%; } p { border: solid 1px; margin: 0px; padding: 0px; } .spanX { float: right; margin-right: 10px; width: 10px; } span { cursor: pointer; } h2 { text-align: center; } </style> </head> <body> <div id="app" class="divcenter"> <h2>标签记录器</h2> <!--文本框，设置双向绑定和回车事件--> <div> <input type="text" placeholder="请输入相应信息后按回车键！" v-model="text" @keyup.Enter="info" style="width: 100%;height: 40px;"> </div> <div> <!--回车后添加的标签和删除按钮--> <p v-for="(list,index) in arr"> <span style="background-color: blanchedalmond;"> {{index+1}} </span> {{list}} <span class="spanX" @click="del(index)">x</span> </p> <!--显示总数和清空按钮--> <div style="border: solid 1px;" v-show="arr.length!=0"> <span>总数：{{arr.length}}</span> <span style="float: right;" @click="delAll">Clear</span> </div> </div> </div> <script> var app = new Vue({ el: "#app", data: { //记录数据的数组，将保存到localStorage的字符串数据转换为对象数据重新保存到数组中 arr: JSON.parse(window.localStorage.getItem('UserData')||'[]'), text: "", }, methods: { //回车触发事件，把文本框里的内容保存到数组arr中 info: function () { //在末尾添加一条数据 this.arr.push(this.text); this.text = ""; }, //单击删除按钮触发事件，清除指定下标数组的值 del: function (index) { //根据下标删除1条数据 this.arr.splice(index, 1); }, //单击清空按钮，清除数组arr里所有是值 delAll: function () { this.arr = []; } }, //监听事件 watch:{ //数据在标签内部改变是否触发：true deep:true, //要记录数据的数组，(名字要好保存数据的数组名一致)，当arr数据发送改变时触发，新的数据返回到newVale中 arr(newVale){ //将新的对象数据转换为字符串数据赋值给变量 let json_data=JSON.stringify(newVale) //将字符串数据按照键值对的方式保存到localStorage中 window.localStorage.setItem('UserData',json_data) } } }) </script> </body> </html>
