好记性的浏览器：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的基本用法。