cookie和web Storage

pkhope 發布于2019-08-22 10:46 / 2823人閱讀

摘要：在所有同源窗口中都是共享的。始終有效，窗口或瀏覽器關閉也一直保存，除非手動刪除，因此用作持久數據。保存用戶臨時會話數據一旦關閉瀏覽器，所有數據都會消失。

朋友去面試了，回來問我一般頁面間傳參用什么方法,我說我一般用是三種1、QueryString 2、cookies 3、webStorage。

QueryString很簡單，就是在URL后面拼接參數，但缺點是傳的值會顯示在瀏覽器的地址欄中且不能傳遞對象，只適用于傳遞簡單的且安全性要求不高的整數值。今天呢主要對比一下cookies和webStorage。

一、cookie的實現方法
cookies是存儲在用戶本地終端上的數據,cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下，而且還可以限制失效時間。
//寫cookie
    function writeCookie(name, value, hours, path) {
        var expire = "";
        if (hours !== null) {
            expire = new Date((new Date()).getTime() + hours * 3600000);
            expire = "; expires=" + expire.toGMTString();
        }
        path = path ? "; path=" + path : "";
        document.cookie = name + "=" + encodeURIComponent(value) + expire + path;
    };

//讀取cookie
    tools.readCookie = function (name) {
        var cookieValue = "";
        var search = name + "=";
        if (document.cookie.length > 0) {
            offset = document.cookie.indexOf(search);
            if (offset != -1) {
                offset += search.length;
                end = document.cookie.indexOf(";", offset);
                if (end == -1) end = document.cookie.length;
                cookieValue = decodeURIComponent(document.cookie.substring(offset, end));
            }
        }
        return cookieValue;
    };

二、web Storage
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
注：storage只能存儲字符串的數據，對于JS中常用的數組或對象卻不能直接存儲。
兩者的實現方法相同。

1、.setItem( key, value)存儲value，將value存儲到key字段：

sessionStorage.setItem("key", "test");
localStorage.setItem("site", "segmentFault");

2、.getItem(key)獲取value，獲取指定key本地存儲的值

var value = sessionStorage.getItem("key");     
var site = localStorage.getItem("site");

3、.removeItem(key)刪除key,刪除指定key本地存儲的值

sessionStorage.removeItem("key");     localStorage.removeItem("site");

4、.clear()清除所有的key/value

sessionStorage.clear();
localStorage.clear();

上面說了一堆的實現方法，現在可以說說它們的區別了。
共同點：
它們都是保存在瀏覽器端，且同源的。
區別：
1、cookies
（1）ookie數據始終在同源的http請求中攜帶，即cookie在瀏覽器和服務器間來回傳遞；
（2）cookie數據路徑（path）的概念，可以限制cookie只屬于某個路徑下。
（3）存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據。
（4）cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
（5）cookie也是在所有同源窗口中都是共享的。

Web Storage不需要通過瀏覽器的請求將數據傳給服務器，因此相比cookie來說能夠存儲更多的數據，大概5M左右。
2、LocalStorage
（1）localStorage 在所有同源窗口中都是共享的。
（2）始終有效，窗口或瀏覽器關閉也一直保存，除非手動刪除，因此用作持久數據。
3、sessionStorage
(1)保存用戶臨時會話數據,一旦關閉瀏覽器，所有數據都會消失。
(2)sessionStorage不在不同瀏覽器窗口中共享

云服務器 GPU云服務器 session和cookie cookie和session session和cookie的區別和聯系 cookie和session區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91242.html

左手Cookie“小甜餅”，右手Web Storage

摘要：源自阮一峰具體什么意思，請看下面的截圖就一目了然表示對象的的數量實戰網站名網站地址確認網站名查詢機制原意是小甜餅，是服務器保存在瀏覽器的一小段文本信息，屬于其中一種互聯網存儲機制。目錄 1. Web Storage 2. Cookie機制 3. 二者的聯系與區別 1.Web Storage 1.1 概述 Web Storage是HTML5提供的一種新的瀏覽器端數據儲存機制，它提供兩...

Nekron 2019-08-21 11:16 評論0 收藏0
Web Storage 與cookies

摘要：和雖然也有存儲大小的限制，但比大得多，可以達到或更大支持事件通知機制，可以將數據更新的通知發送給監聽者。有時也用，指某些網站為了辨別用戶身份，進行跟蹤而存儲在本地終端上的數據，通常經過加密。 Web Storage介紹 Web Storage帶來的好處減少網絡流量：一旦數據保存在本地后，就可以避免再向服務器請求數據，因此減少不必要的數據請求，減少數據在瀏覽器和服務器間不必要地來回傳...

zhkai 2019-08-01 18:02 評論0 收藏0
Web Storage 與cookies

摘要：和雖然也有存儲大小的限制，但比大得多，可以達到或更大支持事件通知機制，可以將數據更新的通知發送給監聽者。有時也用，指某些網站為了辨別用戶身份，進行跟蹤而存儲在本地終端上的數據，通常經過加密。 Web Storage介紹 Web Storage帶來的好處減少網絡流量：一旦數據保存在本地后，就可以避免再向服務器請求數據，因此減少不必要的數據請求，減少數據在瀏覽器和服務器間不必要地來回傳...

Achilles 2019-08-29 13:51 評論0 收藏0
本地存儲——Cookie與Web Storage

摘要：是客戶端用來存儲數據的它既可以在客戶端設置也可以在服務器端設置。會跟隨任意請求一起發送標準中的包括了兩種存儲方式和用于本地存儲一個會話中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。 Cookie cookie是客戶端用來存儲數據的,它既可以在客戶端設置也可以在服務器端設置。cookie會跟隨任意HTTP請求一起發送 Web Storage htm...

mating 2019-08-20 16:17 評論0 收藏0