HTML5 sessionStrage localStorage cookie

時間 2019-11-29

標籤 html5 html sessionstrage localstorage cookie 欄目 HTML5 简体版

原文原文鏈接

sessionStrage 是HTML5新增的會話存儲對象，不具備跨域等一切異/多頁面操做，用於臨時保存同一窗口（標籤頁）的數據，在窗口關閉或瀏覽器關閉將會刪除這些數據。javascript

與之相對應的有 localStorage 將數據保存在客戶端硬件設備上，無論它是什麼，意思就是下次打開計算機時候數據還在。html

下面詳細對於前端頁面緩存進行整理一下：前端

前端緩存有 cookie sessStrage localStorage 三種。java

1.cookie jquery

1)大小限制。cookie大小限制在4k左右，不適合存業務數據，多用於身份認證跨域

2)隨HTTP事務發送。cookie每次都會隨HTTP事務一塊兒發送，通常請求會佔用浪費帶寬數組

1.1應用瀏覽器

js設置cookie緩存

document.cookie="popped=yes"

var cookie = {//封裝好的方法
    set:function(key,val,time){//設置cookie方法
        var date=new Date(); //獲取當前時間
        var expiresDays=time;  //將date設置爲n天之後的時間
        date.setTime(date.getTime()+expiresDays*24*3600*1000); //格式化爲cookie識別的時間
        document.cookie=key + "=" + val +";expires="+date.toGMTString();  //設置cookie
    },
    get:function(key){//獲取cookie方法
        /*獲取cookie參數*/
        var getCookie = document.cookie.replace(/[ ]/g,"");  //獲取cookie，而且將得到的cookie格式化，去掉空格字符
        var arrCookie = getCookie.split(";")  //將得到的cookie以"分號"爲標識 將cookie保存到arrCookie的數組中
        var tips;  //聲明變量tips
        for(var i=0;i<arrCookie.length;i++){   //使用for循環查找cookie中的tips變量
            var arr=arrCookie[i].split("=");   //將單條cookie用"等號"爲標識，將單條cookie保存爲arr數組
            if(key==arr[0]){  //匹配變量名稱，其中arr[0]是指的cookie名稱，若是該條變量爲tips則執行判斷語句中的賦值操做
                tips=arr[1];   //將cookie的值賦給變量tips
                break;   //終止for循環遍歷
            }
        },
      delete:function(key){ //刪除cookie方法
         var date = new Date(); //獲取當前時間
         date.setTime(date.getTime()-10000); //將date設置爲過去的時間
         document.cookie = key + "=v; expires =" +date.toGMTString();//設置cookie
        }
        return tips;
    }
}

jQuery 操做cookie安全

$.cookie('the_cookie', 'the_value');

//添加一個"會話cookie"

$.cookie('the_cookie','the_value',{
    expires:7,  
    path:'/',
    domain:'jquery.com',
    secure:true
})
//expires：（Number|Date）有效期；設置一個整數時，單位是天；也能夠設置一個日期對象做爲Cookie的過時日期；
//path：（String）建立該Cookie的頁面路徑；
//domain：（String）建立該Cookie的頁面域名；
//secure：（Booblean）若是設爲true，那麼此Cookie的傳輸會要求一個安全協議，例如：HTTPS；

2.sessStrage

1) 同源策略限制。若想在不一樣頁面之間對同一個sessionStorage進行操做，這些頁面必須在同一協議、同一主機名和同一端口下。(IE 8和9存儲數據僅基於同一主機名，忽略協議（HTTP和HTTPS）和端口號的要求)

2) 單標籤頁限制。sessionStorage操做限制在單個標籤頁中，在此標籤頁進行同源頁面訪問均可以共享sessionStorage數據。

3) 只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一塊兒發送到服務器，只會在本地生效，並在關閉標籤頁後清除數據。(若使用Chrome的恢復標籤頁功能，seesionStorage的數據也會恢復)。

4) 存儲方式。seesionStorage的存儲方式採用key、value的方式。value的值必須爲字符串類型(傳入非字符串，也會在存儲時轉換爲字符串。true值會轉換爲"true")。

5) 存儲上限限制：不一樣的瀏覽器存儲的上限也不同，但大多數瀏覽器把上限限制在5MB如下。

js設置sessionStorage

// 保存數據到sessionStorage

.setItem('key','value');sessionStorage

// 從sessionStorage獲取數據

var=.getItem('key');datasessionStorage

// 從sessionStorage刪除保存的數據

.removeItem('key');sessionStorage

// 從sessionStorage刪除全部保存的數據

.clear();sessionStorage

jQuery 操做sessionStorage

// 保存數據到sessionStorage

$.session.set('key', 'value')

// 從sessionStorage獲取數據

$.session.get('key');

// 從sessionStorage刪除保存的數據

$.session.remove('key');

// 從sessionStorage刪除全部保存的數據

$.session.get('key');

3.localStorage

1）localStorage沒有大小限制。限制的是瀏覽器對localStorage的限制約500萬字符左右，個瀏覽器不一致。

2）localStorage隱私模式不可讀取。瀏覽器在設置成無痕瀏覽或者隱私模式時localStorage不可讀取。

3）localStorage不能被爬蟲獲取。本質是在讀寫文件，不要用它徹底取代URL傳參，數據多的話會比較卡（Firefox會一次行將數據導入內存，想一想就感受嚇人）。

4）localStorage沒有時間限制。只要不手動清除緩存就會一直存在，若是後臺設置有效時間，過時以後數據仍是存在不過不可用

JS下的操做方法

獲取鍵值：localStorage.getItem(「key」)
設置鍵值：localStorage.setItem(「key」,」value」)
清除鍵值：localStorage.removeItem(「key」)
清除全部鍵值：localStorage.clear()
獲取鍵值2：localStorage.keyName
設置鍵值2：localStorage.keyName = 「value」

JQ下的操做方法（JS方法前加」window.」）

獲取鍵值：window.localStorage.getItem(「key」)
設置鍵值：window.localStorage.setItem(「key」,」value」)
清除鍵值：window.localStorage.removeItem(「key」)
清除全部鍵值：window.localStorage.clear()
獲取鍵值2：window.localStorage.keyName
設置鍵值2：window.localStorage.keyName = 「value」

demo:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        // JS操做部分
        localStorage.JSa="JSA";
        document.write(localStorage.JSa);
        localStorage.setItem('JSb','&nbsp;JSB');
        document.write(localStorage.getItem('JSb'));
        // JQuery操做部分
        $(function(){
            window.localStorage.JQa="JQA";
            $("#a").text(window.localStorage.JQa);
            window.localStorage.setItem('JQb','JQB');
            $("#b").text(window.localStorage.getItem('JQb'));
        });
    </script>
</head>
<body>
    <p id="a"></p>
    <p id="b"></p>
</body>
</html>

相關標籤/搜索

sessionstrage

cookie&sessionstorage&localstorage

cookie&session&localstorage

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。