JavaScript - LocalStorage(本機端儲存)

2019-02-06 PV:221

LocalStorage 是一種在瀏覽器資料庫中儲存資料的方式，允許將資料儲存在瀏覽器中。有兩種型態的網頁儲存：本機端儲存 (LocalStorage)、連線期間儲存 (SessionStorage)

在 HTML5 之前，cookie 是瀏覽器儲存資訊最主要的方式，是伺服器傳送給使用者瀏覽器的一個小片段資料。常見的應用是判例如：廣告追蹤、身份驗證、購物車，或任何其他伺服器應該記住的資訊

但限制如下：

不能儲存太多資料，有容量的限制 4kb
每次請求網頁時都需傳送到伺服器端。
不安全
可設定失效時間，預設是瀏覽器關閉後失效

什麼是 LocalStorage

就本機的儲存功能而言，HTML 新增兩種僅在瀏覽器保存，不參與 serve 溝通的儲存方式。儲存物件 (storage object) 包含兩種不同的資料儲存方式，本機端儲存物件（localStorage) 和連線期間儲存物件 (sessionStorage)。這兩種方式都使用相同的方法和特性。

差異：

cookie 關閉視窗會將資料保存
sessionStorage session 關閉視窗即失效
localStorage 關閉視窗會將資料保存，直到主動去清空，ChromeDevTools 可做修改

缺點:

各瀏覽器容量大小不一，IE8+才支援
localStorage 儲存值為 string，JSON 需轉換處理
無法被爬蟲抓取
內容過多會消號記憶體空間，導致卡頓

在 chrome 瀏覽器可以透過 devtool 中去查詢 localstorage，下面會介紹幾個操控 localstorage 的方式。

storage API 的操作

要將一個項目儲存到儲存物件中，使用 setItem()，需要兩個參數 key/值配對

1	localStorage.setItem("name", "caibin");

要取得儲存物件中的項目，使用 getItem()，需要儲存物件的 key

1	localStorage.getItem("name"); //caibin,讀取儲存在localStorage物件里名為name的變數的值

刪除某筆資料

1	localStorage.removeItem("name");

清除所有儲存物件中的資訊

1	localStorage.clear();

實際透過 devtool 觀察

<h2>請輸入你的姓名</h2>
<input type="text" class="textClass" />
<input type="button" class="btnClass" value="點擊" />
<input type="button" class="btnCall" value="點擊呼叫名字" />

var btn = document.querySelector(".btnClass");

btn.addEventListener("click", function saveName(e) {
  var str = document.querySelector(".textClass").value;
  localStorage.setItem("myName", str);
});

var call = document.querySelector(".btnCall");

call.addEventListener("click", function callName(e) {
  var str = localStorage.getItem("myName");
  alert(str);
});

資料轉換

localStorage 儲存格式為字串形式，所以這裡要學習資料型別轉換。

JSON.stringify(): 轉為 JSON 格式的字串
JSON.parse(): 轉為 JSON 格式的字串

會用在要儲存一個陣列裡面有多筆資料的時候，(JSON 格式)。
下面例子為將陣列中的學生資料名稱轉為字串後，儲存進去 localstorgae，再把字串轉回原本型態後取出

var students = {
  xiaomin: {
    name: "xiaoming",
    grade: 1,
  },
  teemo: {
    name: "teemo",
    grade: 3,
  },
};
students = JSON.stringify(students); //將JSON轉為字串存到變數裡
console.log(students);
localStorage.setItem("students", students); //將變數存到localStorage裡
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //轉為JSON
console.log(newStudents); // 列印出原先物件