iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 25

[Day 25] LocalStorage 介紹

前言

HTML5 的 Web Storage 是一種可讓網頁將資料儲存於本地端的技術,其作用如同 cookie。

  • Cookie 儲存空間很小,最多僅能儲存4KB的資料。
  • HTML5 Web Storage 的儲存空間則大得多(儲存資料容量至少5MB以上)。

localStorage 與 sessionStorage

Web Storage 提供兩個物件可以將資料存在 client 端,一種是 localStorage,另一種是 sessionStorage

  • localStorage:可以跨瀏覽器分頁(tab)存取,且資料存取沒有期限,除非手動從本地端清除。
  • sessionStorage:生命週期較短,每次分頁或瀏覽器關掉後就會清除。

基本操作:

  • 設置資料:localStorage.setItem(key, value)
  • 取得資料:let storageValue = localStorage.getItem(key, value)
  • 清除資料:localStorage.removeItem(key)
  • 清除全部資料:localStorage.clear()

只要將localStorage替換sessionStorage即可

  • 儲存在本地端的資料,格式為 key : value,需注意的是「value 的型態只有 String」!

找到儲存的資料

  • 在 DevTools console

JSON 字串轉換

var arr = ['1','2','c'];

console.log( arr + " is " + typeof(arr));
// 1,2,c is object

1.轉換成字串 JSON.stringify

var arrToStr = JSON.stringify(arr);

2.轉換回原本格式 JSON.parse

  • 會把一個JSON字串轉換成 JavaScript的數值或是物件
var parse = JSON.parse(arrToStr);

參考資料:
[JavaScript] localStorage 的使用
[第七週] 瀏覽器資料儲存 - Cookie、LocalStorage、SessionStorage
[Day16] JavaScript - 前端資料存
HTML5 的 Web Storage- local storage 與 session storage
Day20 localStorage、sessionStorage


上一篇
[Day 24] DOM Array Methods 實作練習
下一篇
[Day 26] JS實作 - expense tracker 記帳簿
系列文
邊工作邊進行前端學習之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言