永久性儲存
前端網頁重新整理後就會恢復到初始狀態,所以中間的數據異動無法被保存與還原
這時需要倚賴本地端儲存方法進行數據保存與還原
本地端儲存方式
特性 | cookie | localStorage | sessionStorage |
---|---|---|---|
生命週期 | 可設定失效時間,預設為關閉瀏覽器失效 | 永久保存,手動清除 | 關閉頁面後清除 |
可用容量 | 4KB 左右 | 5MB 左右 | 5MB 左右 |
與 Server 溝通 | 每次溝通都會附加,保存過多數據會帶來效能問題 | 不參與溝通 | 不參與溝通 |
瀏覽器與主機溝通架構
flowchart LR A[cookie id] B[service side seesion] C[session content] A-->| Send | B B-->| Read | C C-->| Response | A
為何網站登入後,關閉瀏覽器再打開,一樣在登入狀態?
查看資料
Chrome Devtool
-> Application
-> Storage
localStorage
寫入
localStorage.setItem(key, content)
key
數據識別值,如果寫入一樣的識別值,複寫
content
數據內容,只接受字串
localStorage.setItem('name', 'david');
let students = [];
students.push({name: 'David', age: 18});
students.push({name: 'John', age: 20});
localStorage.setItem('students', students);
查看
students
數據內容為何?
序列化
由於 localStorage
只接受字串類型的數據內容,所以 Array
或是 Object
這種非字串類型的數據,需要轉為字串,這個過程稱為序列化 (serialize
)
JSON.stringify(object)
let students = [];
students.push({name: 'David', age: 18});
students.push({name: 'John', age: 20});
let studentsStr = JSON.stringify(students);
localStorage.setItem('students', studentsStr);
此時觀察數據內容發現已經改為字串方式存取
關於 JSON
JavaScript Object Notation
一種資料交換格式,對比 XML
資料交換格式而言,來的輕巧與方便存取
讀取
localStorage.getItem(key)
let students = localStorage.getItem('students');
console.log(students);
查看
students
數據內容為何?
反序列化
將被序列化的 Array
或 Object
返回原始類型數據
JSON.parse(serialize)
let studentsStr = localStorage.getItem('students');
students = JSON.parse(studentsStr);
console.log(students);
刪除
localStorage.removeItem(key)
localStorage.removeItem('students');
練習
本地儲存版 Todo List
將上一個章節練習的 Todo List 擴充以下功能
- 進入時要求使用者輸入帳號作為儲存
key
值 - 新增儲存功能
- 新增還原功能
- 自動儲存功能