本地存儲 · 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> ```