三分鐘快速瞭解 localStorage 與 sessionStorage及區別

localstorage（本地存儲）

優點

• localStorage 拓展了 cookie 的 4K 限制。
• localStorage 會能夠將第一次請求的數據直接存儲到本地，這個至關於一個 5M 大小的針對於前端頁面的數據庫，相比於 cookie 能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的。
• 不會傳送到服務器，存儲在本地的數據能夠直接獲取，減小了客戶端和服務器端的交互，節省了網絡流量

侷限

• 瀏覽器的大小不統一，而且在 IE8 以上的 IE 版本才支持 localStorage 這個屬性。
• 目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換。
• localStorage在瀏覽器的隱私模式下面是不可讀取的。
• localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡。
• localStorage不能被爬蟲抓取到。
• 僅保存在客戶端，不參與和服務器的通訊
• 數據對象沒有過時時間，除非你手動去刪除。

存儲對象屬性

屬性	描述
length	返回存儲對象中包含多少條數據。

存儲對象方法

方法	描述
key(n)	返回存儲對象中第 n 個鍵的名稱
getItem(keyname)	返回指定鍵的值
setItem(keyname, value)	添加鍵和值，若是對應的值存在，則更新該鍵對應的值。
removeItem(keyname)	移除鍵
clear()	清除存儲對象中全部的鍵

首先在使用 localStorage 的時候，咱們須要判斷瀏覽器是否支持 localStorage 這個屬性：

if(!window.localStorage){
    alert("瀏覽器不支持localstorage");
}else{
    alert("瀏覽器支持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"]);
}

三種方法讀取

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

修改與寫入一致，就是覆蓋原來的數據

刪除

一、將localStorage的全部內容清除

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

二、 將 localStorage 中的某個鍵值對刪除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);  //設置
console.log(storage);
storage.removeItem("a"); //移除
console.log(storage.a);  //undefined

鍵key的獲取

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);//a c
}

注意事項

通常咱們會將 JSON 存入 localStorage 中，可是在 localStorage 會自動將 localStorage 轉換成爲字符串形式。
這個時候咱們可使用 JSON.stringify() 這個方法，來將 JSON 轉換成爲 JSON 字符串。讀取以後要將 JSON 字符串轉換成爲 JSON 對象，使用 JSON.parse() 方法：

var storage=window.localStorage;
var data={
    name:'fur',
    sex:'girl',
    hobby:'code'
};

//將對象轉換成json格式字符串
var d=JSON.stringify(data);
console.log(d)
//{"name":"fur","sex":"girl","hobby":"code"}

//將字符串存入data
storage.setItem("data",d);

//獲取字符串形式的data
var json=storage.getItem("data");

//將JSON字符串轉換成爲JSON對象輸出
var jsonObj=JSON.parse(json);
console.log(jsonObj)
//Object { name: "fur", sex: "girl", hobby: "code" }
console.log(typeof jsonObj);//object

sessionStorage （會話存儲）

sessionStorage 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁以後將會刪除這些數據，增刪改查寫法與localstorage一致，不在贅述。

if(!window.sessionStorage ){
    alert("瀏覽器不支持sessionStorage ");
}else{
    alert("瀏覽器支持sessionStorage ");
    //主邏輯業務
}

localStorage 與 sessionStorage 區別

• localStorage 屬於永久性存儲，而 sessionStorage 屬於當會話結束的時候，sessionStorage 中的鍵值對會被清空。

• 不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。同一瀏覽器的相同域名和端口的不一樣頁面間能夠共享相同的 localStorage，可是不一樣頁面間沒法共享sessionStorage的信息。

• localStoragese：經常使用於長期登陸（+判斷用戶是否已登陸），適合長期保存在本地的數據，而sessionStorage：敏感帳號一次性登陸