cookie和web Storage

pkhope 发布于2019-08-22 10:46 / 2616人阅读

摘要：在所有同源窗口中都是共享的。始终有效，窗口或浏览器关闭也一直保存，除非手动删除，因此用作持久数据。保存用户临时会话数据一旦关闭浏览器，所有数据都会消失。

朋友去面试了，回来问我一般页面间传参用什么方法,我说我一般用是三种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区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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