JS 筆記 - 認識 LocalStorage

瀏覽器如何記錄資料

現在瀏覽器非常聰明，為了提升使用者體驗好感度，會發現到很多網站的帳號、密碼都只要輸入一次就可以了，下次再登入就會被記得，甚至上次瀏覽過的購物商品，今天再打開網頁時，會出現瀏覽紀錄!到底是怎麼做到的?

是透過這三種方式記錄的( 可透過 chrome 開發人員工具中的 Application 標籤找到):

LocalStorage
SessionStorage
Cookie

LocalStorage 基本介紹

在 HTML5 中，新加入了一個 localStorage 特性，此特性主要是用來作為本地儲存來使用的，解決了 cookie 儲存空間不足的問題。

localStorage 中一般瀏覽器支援的是 5M 大小 ( 在不同的瀏覽器中 localStorage 會有所不同 )。
cookie 的儲存空間為 4k。

localStorage 的優勢與侷限

localStorage 的優勢

拓展了 cookie 的 4K 限制。
瀏覽器儲存在本地端的資料，格式為 key, value。

需要注意的是「value 的型態只有 String」!會可以將第一次請求的資料直接儲存到本地，這個相當於一個 5M 大小的針對於前端頁面的資料庫，相比於 cookie 可以節約頻寬，但是這個卻是只有在高版本的瀏覽器中才支援的

localStorage 的侷限

在 IE8 以上版本才支援這個屬性。
目前所有的瀏覽器中都會把 localStorage 的值 ( key, value ) 型別限定為 string ，需要透過 JSON 轉換型別。
在瀏覽器的隱私模式是不可讀取的。
基本上是對 string 的讀取，如果儲存內容多的話會消耗記憶體空間，會導致頁面卡頓。
無法被爬蟲抓取到。

localStorage 與 sessionStorage 的差異

這兩者常一起講，因為幾乎都相同，唯一的區別只有:

localStorage 屬於永久性儲存。
sessionStorage 屬於當結束網頁的時候，sessionStorage 中的鍵值對會被清空。

sessionStorage 介紹。

localStorage 的存取

基本操作會使用下方兩個屬性存取 localStorage 的值。

setItem 存入資料
getItem 取出資料

1
2
3

var str = "text";
localStorage.setItem("textName", str); //存入資料(key,value)
console.log(localStorage.getItem("textName")); //取出 key 的值

codepen: https://codepen.io/hnzxewqw/pen/rNVwzzq

簡易練習

下方有一個 input 表格，並透過兩個 button，存入 input 輸入的資料，另一個是呼叫資料。

user story:

有一個 input，會輸入資料。

一個 button 存入資料。

資料要存到 localStorage。

一個 button 取出資料。

HTML

<div class="inputClass">
  <input type="text" class="text" placeholder="請輸入姓名" /><br />
  <input type="button" class="setBtn" value="存入資料" />
</div>

<input type="button" class="getBtn" value="取出資料" />

存入資料 setItem

JavaScript

首先要透過點擊的 button 後，存入資料 tim，所以要綁定 .setBtn 後，建立監聽事件。

//綁定 .setBtn
var setBtn = document.querySelector(".setBtn");
//監聽 setBtn
setBtn.addEventListener("click", setInputItem, false);
//建立 function
function setInputItem(e) {
  var str = document.querySelector(".text").value; //選擇到表單輸入的值
  localStorage.setItem("textName", str); //存入 localStorage
}

在 function 內，透過 console.log('textName'); 確認所輸入的資料有存入 localStorage

console.log("textName");
//透過 Application 檢查 localStorage 後
//key=textName
//value=tim

取出資料 getItem

綁定取出資料的 button，建立監聽 click 事件，點擊後，取出剛剛輸入的資料，並跳出 alert 視窗。

//綁定 .getBtn
var getBtn = document.querySelector(".getBtn");
//監聽 getBtn
getBtn.addEventListener("click", getInputItem, false);
//建立 function
function getInputItem(e) {
  var str = localStorage.getItem("textName"); //取出 textName 的值
  alert("Hello!" + str); //取出後跳 alert
}

codepen: https://codepen.io/hnzxewqw/pen/ZEGyJPw

參考資料: