本地存儲特性
- 數據存儲在用戶瀏覽器中
- 設置、讀取方便，甚至頁面刷新也不丟失數據
- 容量較大，sessionStorage 約5M，localStorage容量約20M
- 只能存儲字符串，可以將對象JSON.stringify()編碼后再存儲
localStorage：關閉瀏覽器后數據仍然存在，直到手動刪除為止
- 生命周期永久有效。除非手動刪除，否則關閉頁面也會存在
- 可以多窗口（頁面）共享（同一瀏覽器可以共享）
- 以鍵值對的形式存儲使用
- window.localStorage中的 window 可以省略
sessionStorage：刷新當前頁后數據仍然存在，但關閉當前頁后數據就沒有了
- 生命周期是瀏覽器窗口的生命周期，當前瀏覽器窗口關閉即消失
- 在同一個窗口（頁面）下數據可以共享
- 以鍵值對的形式存儲使用
- window.sessionStorage中的 window 可以省略
localStorage
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <button>使用 localStorage </button> <input class="input" placeholder="請輸入用戶名" /> <button class="save">存儲用戶名</button> <button class="get">獲取用戶名</button> <button class="remove">刪除用戶名</button> <button class="clear">清除所有用戶名</button> </div> </body> <script> /** * 本地存儲特性 * 1、 數據存儲在用戶瀏覽器中 * 2、設置、讀取方便，甚至頁面刷新也不丟失數據 * 3、容量較大，sessionStorage 約5M，localStorage容量約20M * 4、只能存儲字符串，可以將對象JSON.stringify()編碼后再存儲 * */ /** * localStorage * 1、生命周期永久有效。除非手動刪除，否則關閉頁面也會存在 * 2、可以多窗口（頁面）共享（同一瀏覽器可以共享） * 3、以鍵值對的形式存儲使用 * 4、window.localStorage中的 window 可以省略 * */ var inputL = document.querySelector(".input"); var saveL = document.querySelector(".save"); var getL = document.querySelector(".get"); var removeL = document.querySelector(".remove"); var clearL = document.querySelector(".clear"); saveL.addEventListener("click", () => { var name = inputL.value; //window 可以省略 window.localStorage.setItem("username", name); }) getL.addEventListener("click", () => { // 獲取用戶名 console.log("localStorage 用戶名：", window.localStorage.getItem("username")); }) removeL.addEventListener("click", () => { localStorage.removeItem("username"); }) clearL.addEventListener("click", () => { localStorage.clear(); }) </script> </html>
sessionStorage
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <button>使用sessionStorage</button> <input id="input" placeholder="請輸入用戶名" /> <button id="save">存儲用戶名</button> <button id="get">獲取用戶名</button> <button id="remove">刪除用戶名</button> <button id="clear">清除所有用戶名</button> </div> </body> <script> /** * 本地存儲特性 * 1、 數據存儲在用戶瀏覽器中 * 2、設置、讀取方便，甚至頁面刷新也不丟失數據 * 3、容量較大，sessionStorage 約5M，localStorage容量約20M * 4、只能存儲字符串，可以將對象JSON.stringify()編碼后再存儲 * */ /** * sessionStorage * 生命周期是瀏覽器窗口的生命周期，當前瀏覽器窗口關閉即消失 * 在同一個窗口（頁面）下數據可以共享 * 以鍵值對的形式存儲使用 * window.sessionStorage中的 window 可以省略 * */ var input = document.querySelector("#input"); var save = document.querySelector("#save"); var get = document.querySelector("#get"); var remove = document.querySelector("#remove"); var clear = document.querySelector("#clear"); save.addEventListener("click", () => { var name = input.value; //window 可以省略 window.sessionStorage.setItem("username", name); }) get.addEventListener("click", () => { // 獲取用戶名 console.log("sessionStorage 用戶名：", window.sessionStorage.getItem("username")); }) remove.addEventListener("click", () => { sessionStorage.removeItem("username"); }) clear.addEventListener("click", () => { sessionStorage.clear(); }) </script> </html>