主機端儲存

• Database
• Storage
• Memory

瀏覽器端儲存

• cookie
• localStorage
• sessionStorage

溝通簡易流程圖

查看方式

設定

localStorage.setItem(key, value)
sessionStorage.setItem(key, value)

設定字串

localStorage.setItem('name', 'david')

設定陣列

let students = [];
students.push({name: 'David', age: 18})
students.push({name: 'John', age: 20})
localStorage.setItem('students', students)

查看後顯示 

[object Object],[object Object]

序列化

JSON.stringify()

修正

let students = [];
students.push({name: 'David', age: 18})
students.push({name: 'John', age: 20})
localStorage.setItem('students', JSON.stringify(students))

function 序列化？

var person = {
    name: 'David',
    age: 18,
    sayHi: function() { console.log('Hi') }
}

localStorage.setItem('person', JSON.stringify(person))

function 無法被序列化

取得

localStorage.getItem(key)
sessionStorage.getItem(key)

取回 students

localStorage.getItem('students')

查看發現取回後是字串

還原序列化資料

JSON.parse(localStorage.getItem('students'))

刪除

localStorage.removeItem(key)
sessionStorage.removeItem(key)

刪除 students

localStorage.removeItem('students')

實作範例

記憶功能的 TODO List