localStorage的詳細

webstorage

webstorage是本地存儲，存儲在客戶端，包括localStorage和sessionStorage。

 

localStorage
localStorage生命週期是永久，這意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，不然這些信息將永遠存在。

存放數據大小爲通常爲5MB,並且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊

 

sessionStorage
sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器後被清除。

存放數據大小爲通常爲5MB,並且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊。

 

local和session的使用api是同樣的，只有生命週期不一樣

 

做用域也不一樣

不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。

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

這裏須要注意的是，頁面及標 籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是能夠共享sessionStorage的。

localStorage.setItem("key","value");//以「key」爲名稱存儲一個值「value」

localStorage.getItem("key");//獲取名稱爲「key」的值

localStorage.removeItem("key");//刪除名稱爲「key」的信息。

localStorage.clear();​//清空localStorage中全部信息

 

主要是用local來判斷用戶已有的操做

好比登錄了沒有啊之類的

 

若是用戶點擊了close的話，那麼就會在local裏面加上一個isClose鍵值對。

當用戶刷新頁面的時候，瀏覽器去local裏取出來，看看有沒有這個鍵，有的話，就不顯示了。

localXXX能夠手動去瀏覽器裏面清除，若是清除了就有廣告了。

function haxi(){
        //判斷localStorage裏有沒有isClose
        if(localStorage.getItem("isClose")){             
            $(".header").hide();
        }else{
            $(".header").show();
        }
        //點擊關閉隱藏圖片存取數據
        $(".close").click(function(){
            $(".header").fadeOut(1000);

            localStorage.setItem("isClose", "1"); 
        })
    }
    haxi();

 

 

以上都是用於本地檢測的，cookies則不是

 

Cookie
生命期爲只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。

存放數據大小爲4K左右 。有個數限制（各瀏覽器不一樣），通常不能超過20個。

與服務器端通訊：每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題。

 

function haxi(){
        if(getCookie("isClose")){             
            $(".header").hide();
        }else{
            $(".header").show();
        }
        
        $(".close").click(function(){
            $(".header").fadeOut(1000);

            setCookie("isClose", "1","s10");
        })
    }
    haxi();