今天要介紹的主角是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
若有業務合作需求，可寫信至： opweb666@gmail.com
創業、網站經營相關內容未來將發布在 小易創業筆記