cookie和web Storage

2024年4月19日 202次阅读 来源: 泽浩沉

朋侪去面试了，返来问我平常页面间传参用什么要领,我说我平经常使用是三种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不在差别浏览器窗口中同享

    原文作者：泽浩沉
    原文地址: https://segmentfault.com/a/1190000007691768
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞