一、sessionStorage 、localStorage 和 cookie 之間的區(qū)別

-共同點(diǎn)：
都是保存在瀏覽器端，且同源的。
-區(qū)別：
1.cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來回傳遞。而sessionStorage和localStorage不會(huì)
自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下。
2.存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)
識(shí)。sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
3.數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或?yàn)g
覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。
4.作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5.Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。
6.Web Storage 的 api 接口使用更方便

注意：
1.同源"指的是"三個(gè)相同"。
－協(xié)議相同
－域名相同
－端口相同
舉例來說：
http://www.example.com/dir/page.html這個(gè)網(wǎng)址，協(xié)議是http://，域名是www.example.com，端口是80（默認(rèn)端口可以省略）。
它的同源情況如下。
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
2.目前所有的瀏覽器中都會(huì)把localStorage的值類型限定為string類型,這個(gè)在對(duì)我們?nèi)粘１容^常見的JSON對(duì)象類型需要一些轉(zhuǎn)換

二、sessionStorage與頁(yè)面 js 數(shù)據(jù)對(duì)象的區(qū)別

頁(yè)面中一般的 js 對(duì)象或數(shù)據(jù)的生存期是僅在當(dāng)前頁(yè)面有效，因此刷新頁(yè)面或轉(zhuǎn)到另一頁(yè)面這樣的重新加載頁(yè)面的情況，數(shù)據(jù)就不存在了。
而sessionStorage 只要同源的同窗口（或tab）中，刷新頁(yè)面或進(jìn)入同源的不同頁(yè)面，數(shù)據(jù)始終存在。也就是說只要這個(gè)瀏覽器窗口沒
有關(guān)閉，加載新頁(yè)面或重新加載，數(shù)據(jù)仍然存在。

三、localStorage的使用

首先在使用localStorage的時(shí)候，我們需要判斷瀏覽器是否支持localStorage這個(gè)屬性
if(！window.localStorage){
    alert("瀏覽器不支持localstorage");
    return false;
}else{
     //主邏輯業(yè)務(wù)
}

3.1 localStorage的寫入有三種方法，這里就一一介紹一下

if(！window.localStorage){
        alert("瀏覽器不支持localstorage");
        return false;
}else{
        var storage=window.localStorage;
        //寫入a字段
        storage["a"]=1;
        //寫入b字段
        storage.b=2;
        //寫入c字段
        storage.setItem("c",3);
        console.log(typeof storage["a"]);
        console.log(typeof storage["b"]);
        console.log(typeof storage["c"]);
}

運(yùn)行后的結(jié)果如下：

image.png

這里要特別說明一下localStorage的使用也是遵循同源策略的，所以不同的網(wǎng)站直接是不能共用相同的localStorage

最后在控制臺(tái)上面打印出來的結(jié)果是:

image.png

注意:剛剛存儲(chǔ)進(jìn)去的是int類型，但是打印出來卻是string類型，這個(gè)與localStorage本身的特點(diǎn)有關(guān)，localStorage只支持string類型的存儲(chǔ)。

3.2 localStorage的讀取

if(!window.localStorage){
  alert("瀏覽器不支持localstorage");
}else{
  var storage=window.localStorage;
  //寫入a字段
  storage["a"]=1;
  //寫入b字段
  storage.b=2;
  //寫入c字段
  storage.setItem("c",3);
  console.log(typeof storage["a"]);
  console.log(typeof storage["b"]);
  console.log(typeof storage["c"]);
  //第一種方法讀取
  var a=storage.a;
  console.log(a);
  //第二種方法讀取
  var b=storage["b"];
  console.log(b);
  //第三種方法讀取
  var c=storage.getItem("c");
  console.log(c);
}

這里面是三種對(duì)localStorage的讀取，其中官方推薦的是getItem\setItem這兩種方法對(duì)其進(jìn)行存取

3.3 localStorage的修改

if(!window.localStorage){
  alert("瀏覽器不支持localstorage");
}else{
  var storage=window.localStorage;
  //寫入a字段
  storage["a"]=1;
  //寫入b字段
  storage.b=2;
  //寫入c字段
  storage.setItem("c",3);
  console.log(storage.a);
  // console.log(typeof storage["a"]);
  // console.log(typeof storage["b"]);
  // console.log(typeof storage["c"]);
  /*分割線*/
  storage.a=4;
  console.log(storage.a);
}
這個(gè)在控制臺(tái)上面我們就可以看到已經(jīng)a鍵已經(jīng)被更改為4了

3.4 localStorage的刪除
3.4.1 將localStorage的所有內(nèi)容清除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);

image.png

3.4.2 將localStorage中的某個(gè)鍵值對(duì)刪除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);

image.png

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
使用key()方法，向其中出入索引即可獲取對(duì)應(yīng)的鍵

image.png

一般我們會(huì)將JSON存入localStorage中，但是在localStorage會(huì)自動(dòng)將localStorage轉(zhuǎn)換成為字符串形式
這個(gè)時(shí)候我們可以使用JSON.stringify()這個(gè)方法，來將JSON轉(zhuǎn)換成為JSON字符串

示例：

if(!window.localStorage){
alert("瀏覽器不支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}

讀取之后要將JSON字符串轉(zhuǎn)換成為JSON對(duì)象，使用JSON.parse()方法
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//將JSON字符串轉(zhuǎn)換成為JSON對(duì)象輸出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

image.png