localStorage、sessionStorage、cookie
localStorage、sessionStorage的區別與共同點
1、localStorage 的設定和獲取
設定：setItem('名稱'，'值')
獲取：getItem('名稱')
- localStorage中的鍵值對總是以字串的形式儲存，儲存在localStorage 的資料可以長期保留；
- 大小：5M甚至更多
<!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 id="theName" type="text" placeholder="輸入名字" > <input id="btn" type="button" value="新增姓名" onclick="getName()"> <p id="txt"></p> <script> function getName() { let myname= document.getElementById('theName').value // let myname = theName.value let btn = document.getElementById('btn') let txt = document.getElementById('txt') console.log(myname); if(!myname || myname == null){ alert('名字不能為空！') }else{ localStorage.setItem('myname',myname) txt.innerHTML = myname } } if(!localStorage.getItem('myname')){ getName() }else{ let storeName = localStorage.getItem('myname') console.log(txt.textContent); txt.textContent = '你好' + storeName; } // let body = document.querySelectorAll('body')[0] // console.log(body.textContent); // console.log('------------------------------'); // console.log(body.innerHTML); // console.log('------------------------------'); // console.log(body.innerText); let storeHello = localStorage.setItem('hello','helloworld') let gethello = localStorage.getItem('hello') console.log(gethello); // localStorage.clear(); console.log(window.indexedDB); </script> </body> </html>
localStorage 的值不會被瀏覽器清除，除非使用者或者開發者自己清除
使用者清除瀏覽器歷史記錄的時候會被清除，開發者使用localStorage.clear()清除
瀏覽器的tab都會保留localStorage的值，關閉瀏覽器再開啟也有保留，所有網站的localStorage都可以再任意的瀏覽器tab標籤頁訪問到，這也是和sessionStorage的區別
sessionStorage 的設定和獲取
設定：setItem('名稱'，'值')
獲取：getItem('名稱')
- 大小：5M甚至更多
sessionStorage 和 localStorage的設定和獲取相似
防止使用者輸入過程中的頁面意外重新整理，導致需要從新輸入，可以使用sessionStorage 來監聽保留實時的輸入內容
<!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 id="field" type="text" placeholder="輸入點東西" > <input id="btn" type="button" value="新增" onclick="getName()"> <p id="txt"></p> <script> sessionStorage.setItem('myCat', 'Tom'); // 獲取文字輸入框 let field = document.getElementById("field"); // 檢測是否存在 autosave 鍵值 // (這個會在頁面偶然被重新整理的情況下存在) if (sessionStorage.getItem("autosave")) { // 恢復文字輸入框的內容 field.value = sessionStorage.getItem("autosave"); } // 監聽文字輸入框的 change 事件 field.addEventListener("change", function () { // 儲存結果到 sessionStorage 物件中 sessionStorage.setItem("autosave", field.value); }); document.getElementById('txt').innerHTML = localStorage.getItem('myname') </script> </body> </html>
sessionStorage 的值只在當前的tab頁面上有效，頁面重新整理時可以保留資料，但是瀏覽器關閉資料就會被清理
總結
結合Cookies對比
- 資料有效期：
cookie:一般由伺服器生成，可以設定失效時間；若沒有設定時間，關閉瀏覽器cookie失效，如果設定了時間，cookie就會儲存在硬碟中，過期失效
sessionStorage：僅在當前瀏覽器視窗關閉之前有效，關閉頁面或者瀏覽器會被清除
localStorage：永久有效，視窗或者瀏覽器關閉也會一直儲存，除非手動永久刪除
- 在通訊方面：
cookie：cookie在瀏覽器和伺服器之間來回傳遞，如果使用cookie儲存過多資料會造成效能問題
sessionStorage：僅在客戶端（瀏覽器）中儲存，不參與伺服器的通訊
localStorage：僅在客戶端（瀏覽器）中儲存，不參與伺服器的通訊
- 應用場景：
cookie：判斷使用者是否登入過網站，以便實現下次自動登入或記住密碼；儲存事件資訊
sessionStorage：敏感賬號一次性登入，單頁面用的較多
localStorage：用於長期登入，適於長期儲存在本地的資料
點選檢視官方文件