JavaScript - LocalStorage(本機端儲存)

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

cookie

在 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 觀察

1
2
3
4
<h2>請輸入你的姓名</h2>
<input type="text" class="textClass" />
<input type="button" class="btnClass" value="點擊" />
<input type="button" class="btnCall" value="點擊呼叫名字" />
1
2
3
4
5
6
7
8
9
10
11
12
13
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,再把字串轉回原本型態後取出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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); // 列印出原先物件

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2020 CYC'S BLOG All Rights Reserved.

UV : | PV :