Day34:好記性的瀏覽器：Localstorage

談這個主題之前，我們先來回憶一下日常的場景，你來到桃子購物網站，選了你要的商品往下捲動網頁，結果竟然發現網頁下方秀出你上次來買東西時，看的那幾樣商品，你心中覺得這個網站真貼心，好聰明。

然而，真正貼心、聰明的是你的瀏覽器。這項技術叫做Web Storage，是HTML5之後出來的新技術，網頁可以透過JavaScript把你瀏覽的資料寫入瀏覽器裡儲存，可以儲存的資料容量有5mb大小。

Web Storage有兩種：

• localStorage：如果沒有清除瀏覽器的話，資料將永久存在瀏覽器中，使用者關掉瀏覽器或分頁，資料仍會存在瀏覽器中，跨瀏覽器分頁也可以使用。
• sessionStorage：使用者關掉瀏覽器或分頁，資料就會被清空。

如何看到localStorage的資料呢？

在Chrome瀏覽器按下F12，瀏覽器會分割稱瀏覽畫面跟Dev Tool，在Dev Tool那一邊點開Application分頁，就可以看到localStorage儲存的資料。

我們可以觀察到它是以Key - Value pair的方式儲存的，而且是以自存的格式儲存的。

那要如何存入資料呢？我們可以使用setItem()方法：

localStorage.setItem(key, value)
sessionStorage.setItem(key, value)

取出資料則是使用getItem()：

localStorage.getItem(key)
sessionStorage.getItem(key)

讓我們來砍看如何實作：

<h2>報名參加華山論劍</h2>
    <input type="text" class="nameClass" />
    <input type="button" class="btnApply" value="報名" />
    <input type="button" class="btnCheck" value="檢查報名狀況" />

var apply= document.querySelector('.btnApply');
var check=document.querySelector('.btnCheck');

function applyTalk(e){
  var str= document.querySelector('.nameClass').value;
  localStorage.setItem('applyName',str);
}
apply.addEventListener('click',applyTalk);

check.addEventListener('click',function(e){
    var str = localStorage.getItem('applyName');
    alert(`${str}，你已經報名成功！！！`)
})

前面有提到localStorage只接受字串(String)的資料，如果存存的資料不是字串，而是陣列或是物件，就會發生問題。

如何解決這個問題呢？

• 再用setItem()儲存資料到localStorage裡面的時候，要先用JSON.stringify()轉為字串。
• 而用getItem()從localStorage取出資料時，要用JSON.parse()方法傳換為本來的資料格式。

讓我們來看一下怎麼做：

var island = [
    {
        islandName: '桃花島',
        owner: '黃藥師'
}
];

var islandStr = JSON.stringify(island);
console.log(islandStr);  //[{"islandName":"桃花島","owner":"黃藥師"}]
localStorage.setItem('islandItem',islandStr);
var getData = localStorage.getItem('islandItem');
console.log(typeof getData);  //string
var getDataAry = JSON.parse(getData);  //轉換為陣列
console.log(getDataAry); 

這就是localStorage的基本用法。