[JavaScript] - LocalStroage

當你在逛「購物網站」點選「商品」後…、「旅遊住宿網站」點選「某間旅館」後，會發現下次進到網站後，怎麼會有上次瀏覽過的「商品」、「旅館」，其實就是存在 LocalStroage 裡．

LocalStroage 想像就是一個瀏覽器的資料庫，Web Storage 主要分為 sessionStorage、LocalStroage 主要是差在生命週期的不同

localStorage、sessionStorage

w3schools 上的解釋生命週期：

• window.localStorage - 不會有過期日，除非自行刪除

  stores data with no expiration date

• window.sessionStorage - 每開一個分頁就有一個 sessionStorage ，關閉後就消失了

  stores data for one session (data is lost when the browser tab is closed)

查看 LocalStorage

以 chrome 來說，在開發者工具裡＝> application => localstorage

localStorage 使用方法

localStorage 存取方式

• 特別要注意的是 LocalStroage 資料「儲存」與「取用」的方式是以String 的方式進行儲存，所以通常都以 JSON 來處理 array、object 的存取

  • JSON.stringify()：將 JSON 格式字串化
  • JSON.parse()：將字串轉為 JSON 格式

localStorage.setItem

• 要存儲 LocalStroage 就用 setItem:

1

LocalStorage.setItem("username", "Andy");

localStorage.getItem

• 要取出 LocalStroage 就用 getItem:

1

localStorage.getItem("username"); // Andy

localStorage.removeItem

• 要刪除 LocalStroage 就用 removeItem:

  1	localStorage.removeItem("username");

localStorage 實戰

• 將 user 轉為字串後存進 localStorage 裡

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  let user = [ { name:'Andy', age:18 },{ name:'Jay', age:30 },{ name:'Bob', age:55 } ]; localStorage.setItem('user',JSON.stringify(user));

這時可以透過使用者工具去看一下 user 資料是否正確

• 從 localStorage 取出

1
2
3
4
5
6

let userdata = JSON.parse(localStorage.getItem('user'));

console.log('userdata[0].name:'+userdata[0].name+' age:'+userdata[0].age);

//console:
//userdata[0].name:Andy age:18

localStorage - ToDoList

這邊有利用 localStorage 做的簡單 To Do List
連結－To Do List

參考：udemy,w3schools,MDN

tags: JavaScript LocalStroage JSON