今天要介紹的主角是localStorage,在過去一般我們都會用Cookie來存一些小資料,但如果想要存多一些的資料,例如:用戶的個人偏好設定、網頁小工具的資料檔...。這些資料就不太適合使用Cookie來保存,這時我們就能改用localStorage來實現我們要的功能。

設定localStorage

 localStorage.setItem(自訂Key值, 資料內容);

 localStorage 的儲存結構是以 Key,Value 形式保存。因此我們通常會將資料json化,讓我們能保存更加豐富的資料型態。

一般使用範例:

<script>
localStorage.setItem('aidecStorage1', '測試資料1234');
</script>

搭配json使用範例:

<script>
var testData = {
    name:'Aidec Li',
    age:27,
}
localStorage.setItem('aidecStorage2', JSON.stringify(testData));
</script>

同場加映:

推薦兩個好用的 json online 線上編輯器


取得localStorage資料

localStorage.getItem(自訂Key值);

一般讀取localStorage範例

<script>
   var gData = localStorage.getItem('aidecStorage1');
   console.log(gData); 
</script>

搭配json讀取範例:

<script>
   var gData = localStorage.getItem('aidecStorage2');
    //使用JSON.parse() 將資料格式還原
   var gDataJson = JSON.parse(gData ); 
   console.log(gDataJson ); 
</script>

刪除localStorage

假如我們要刪除特定Key值得localStorage,可以用

localStorage.removeItem('欲移除的Key值');

範例:

<script>
    localStorage.removeItem('aidecStorage2');
</script>

清空localStorage

將localStorage內所有Key都刪除,可以用clear()

localStorage.clear();

後語

localStorage的操作方式比Cookie的操作簡單許多,但localStorage在PHP無法像Cookie一樣,用像$_COOKIE這種超全域性變數就能取得。想知道如何透過js設定與取得Cookie,可以參考這篇javascript設定語取得Cookie值 。




文章轉載或引用,請先告知並保留原文出處與連結!!3Q

原文連結:
https://blog.aidec.tw/post/web-localStorage