永久性儲存

前端網頁重新整理後就會恢復到初始狀態,所以中間的數據異動無法被保存與還原

這時需要倚賴本地端儲存方法進行數據保存與還原

本地端儲存方式

特性cookielocalStoragesessionStorage
生命週期可設定失效時間,預設為關閉瀏覽器失效永久保存,手動清除關閉頁面後清除
可用容量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 數據內容為何?

反序列化

將被序列化的 ArrayObject 返回原始類型數據

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 擴充以下功能

  1. 進入時要求使用者輸入帳號作為儲存 key
  2. 新增儲存功能
  3. 新增還原功能
  4. 自動儲存功能