本地存储 · JavaScript

## 特性 1. 设置,读取方便. 2. 容量较大,sessionStorage约5M,localStorage约20M. 3. 只能存储字符串,可以将对象JSON.stringify()编码后存储. ## window.sessionstorage 1. 声明周期为关闭浏览器窗口. 2. 在同一个窗口(页面)下数据可以共享. ``` <body> <input type="text" id="username"> <br> <input type="button" value="设置数据" id="setData"> <input type="button" value="获取数据" id="getData"> <input type="button" value="删除数据" id="delData"> <script> var username = document.querySelector('#username'); //存储数据 document.querySelector('#setData').onclick = function () { var value = username.value; window.sessionStorage.setItem('username', value); }; //获取数据 document.querySelector('#getData').onclick = function () { var value = window.sessionStorage.getItem('username'); }; document.querySelector('#delData').onclick = function () { //删除数据 window.sessionStorage.removeItem('username'); //删除所有 window.sessionStorage.clear(); }; </script> ``` ## window.localStorage 1. 永久生效,除非手动删除(服务器方式访问然后清除缓存). 2. 可以多窗口(页面)共享. ``` <input type="text" id="username"> <br> <input type="button" value="设置数据" id="setData"> <input type="button" value="获取数据" id="getData"> <input type="button" value="删除数据" id="delData"> <script> var username = document.querySelector('#username'); //存储数据 document.querySelector('#setData').onclick = function () { var value = username.value; window.localStorage.setItem('username', value); }; //获取数据 document.querySelector('#getData').onclick = function () { var value = window.localStorage.getItem('username'); console.log(value); }; document.querySelector('#delData').onclick = function () { //删除数据 window.localStorage.removeItem('username'); //删除所有 window.localStorage.clear(); }; </script> ```