前端存儲 (2) - sessionStorage ,localStorage

sessionStorage ,localStorage 存儲

目錄

• 定義
• 生命週期
• 語法
• 存儲大小
• 注意點

定義

sessionStorage ,localStorage 瀏覽器提供的api，
能夠在當前域名下存儲信息，只能存儲 string

生命週期

sessionStorage 是關閉當前 tab頁 就清楚了，localStorage 一直都在，關閉瀏覽器也會存在

語法

存儲

sessionStorage.setItem(key,value);

sessionStorage.setItem("userName","王五");

獲取

var result = sessionStorage.getItem(key);

清除
sessionStorage.clear();

存儲大小 5Mb 左右

測試 當前瀏覽器存儲大小 http://dev-test.nemikor.com/w...

注意點

存儲的時候 value 要是 string ，不要用數組 或者 對象

數組
// 錯誤處理方式
sessionStorage.setItem("a",[1,2,3,4,5])
sessionStorage.getItem("a")   // "1,2,3,4,5"  這樣處理的話，返回成了一個 string，得本身在轉換成 數組

// 正確處理方式
sessionStorage.setItem("a",JSON.stringify([1,2,3,4,5]))
JSON.parse(sessionStorage.getItem("a") )  // [1,2,3,4];


對象
// 錯誤處理方式
sessionStorage.setItem("a",{id:"134",name:"33"})
sessionStorage.getItem("a")  //  "[object Object]"  ,返回的這種數據都沒得辦法處理


// 正確處理方式
sessionStorage.setItem("a",JSON.stringify({id:"134",name:"33"}))
JSON.parse(sessionStorage.getItem("a") ); //  {id:"134",name:"33"}

常見使用方式

sessionStorage 能夠存儲些用戶信息，在瀏覽器關閉前不怎麼改變的 比方下拉框

getSelectData("userType",function(data){

  console.log(data);

});


 function  getSelectData(key,callback){

     var storeMap = {};

     var key_url = {
     "user": 'api/user',
     "orderStatus":'api/order/status',
     "userType": "api/user/type"

     }

     var result = getStore(key);
     if(result){
        callback(result);
        return ;
     }

     $.get(key_url[key],).done(function(data){
        setStore(key,data);
        callback(data);
     });

     function setStore(key,value){
            sessionStorage.setItem(key,JSON.stringify(value))
     }

     function getStore(key){
        var result = sessionStorage.getItem(key);
        if(!result){
            return null;
        }
        return JSON.parse(result)
     }

 }