localStorage 設定與取得資料用法

今天要介紹的主角是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值。

文章轉載或引用，請先告知並保留原文出處與連結！！(單純分享或非營利的只需保留原文出處，不用告知)

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