【筆記】瀏覽器的儲存空間 local Storage

Photo by Scott Graham on Unsplash

在瀏覽網頁時，有時候會需要暫存一些資料，例如：購物網站的購物車資訊。這類資料不是必要，但能提升使用者的瀏覽體驗。

在HTML5問世時，誕生了一種Web Storage技術，可以將網頁資訊暫時儲存在使用者的瀏覽器中，並且容量基本上為5MB以上(隨著瀏覽器而不同)，比起cookies的4KB實在大上許多，而當中又以localStorag使用最為方便。

以下為兩種不同的web storage :

• localStorage：可以跨瀏覽器分頁做使用、使用者關掉分頁或瀏覽器再打開資料仍不會消失，且資料無期效限制，資料將永久被保留。
• sessionStorage：生命週期較短，當使用者關掉瀏覽器或分頁時，sessionStorage 中的資料將被清空。

localStorage常用方法:

儲存方法：

• localStorage.setItem(‘key’, ‘value’) 透過setItem()指定物件屬性的key跟value

localStorage.setItem('player', 50)

讀取方法：

localStorage.getItem('player')

刪除方法：

• localStorage.removeItem(“key”) 透過removeItem輸入屬性的key來刪除儲存資訊

localStorage.removeItem('player')

localStorage 只能處理字串資料

在localStorage的空間裡，只能處理字串，當要儲存object物件或陣列時，需搭配JSON.stringify() ，將要儲存的資料轉換為 JSON 格式的字串；要取出資料時，再透過 JSON.parse() ，將資料轉換回原本的格式：

let player = {id: 1, player1:"John", assets:5000000000} localStorage.setItem('playerList', player)

無法正常顯示Value

localStorage.setItem('playerList', JSON.stringify(player))

正常顯示Value

輸出時搭配JSON.parse()

不加JSON.parse只會回傳字串型態，加了才會轉回JS的物件型態