localStorage , SsessionStorage , Cookie , Session的联系与区别

最新推荐文章于 2022-08-15 22:00:25 发布

DepressedPrince

最新推荐文章于 2022-08-15 22:00:25 发布

阅读量430

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/depressedprince/article/details/80400558

版权

前端基础专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、Web本地存储

【含义说明】

localStorage（长期存储）：浏览器关闭后，数据一直存在，不会被清除，即没有时间限制。

seesionStorage（临时存储）：针对每一个session进行数据存储。只有当浏览器关闭窗口后，数据才会被清除。

注意：本地存储都是不能跨域访问的。不同浏览器的存储限制也不一样，chrome一般限制为5M。当存储的Storage超过限制的时候，可以采用跨域存储的方式，将数据存储于其他域，跨域读取与访问。

【使用方法】

1. 保存数据到本地（storage只能存储字符串的数据）

    const info = {
        name: 'Lee',
        age: 20,
        id: '001'
    };
    sessionStorage.setItem('key', JSON.stringify(info));
    localStorage.setItem('key', JSON.stringify(info));
    // 也可以使用对象属性的方式
    sessionStorage.key1 = JSON.stringify(info);
    localStorage.key1 = JSON.stringify(info);

2. 从本地存储获取数据

    var data1 = JSON.parse(sessionStorage.getItem('key')); // 或者sessionStorage.key
    var data2 = JSON.parse(localStorage.getItem('key')); // 或者localStorage.key

3. 本地存储中删除某个保存的数据

    sessionStorage.removeItem('key');
    localStorage.removeItem('key');

4. 删除所有保存的数据

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

5. 监听本地存储的变化

Storage 发生变化（增加、更新、删除）时的触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage

    window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })

二、cookie和session

【定义说明】

Cookie：存在于客户端即浏览器，可以保存用户的账号密码，用于识别用户，当浏览器与服务器交互时，会同时发送cookie。

1. 有两种存在方式：1）持久性cookie（persistent cookie），设置了存储时间，以文件的形式保存在用户硬盘；2）会话cookie（session cookie），没有设置存储时间，浏览器关闭前消失，保存在内存，目前和服务器交互的时候使用的都是会话cookie

2. Cookie其实还可以用在一些方便用户的场景下，设想你某次登陆过一个网站，下次登录的时候不想再次输入账号了，怎么办？这个信息可以写到Cookie里面，访问网站的时候，网站页面的脚本可以读取这个信息，就自动帮你把用户名给填了，能够方便一下用户。这也是Cookie名称的由来，给用户的一点甜头。

Session：存在于服务器端，用于跟踪用户会话。每一个网站访客都会被分配一个唯一的标识符，即会话ID（session_ID)。可以保存在文件、数据库、内存中。

1. 由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session。比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，这个时候服务端要为特定的用户创建特定的Session，用于标识这个用户，并且跟踪用户，这样才知道该用户的购物车里面有几本书。这个Session是保存在服务端的，有一个唯一标识。在服务端保存Session的方法很多，内存、数据库、文件都有。集群的时候也要考虑Session的转移，在大型的网站，一般会有专门的Session服务器集群，用来保存用户会话，这个时候 Session 信息都是放在内存的，使用一些缓存服务比如Memcached之类的来放 Session。

2. 思考一下服务端如何识别特定的客户？这个时候Cookie就登场了。每次HTTP请求的时候，客户端都会发送相应的Cookie信息到服务端。实际上大多数的应用都是用 Cookie 来实现Session跟踪的，第一次创建Session的时候，服务端会在HTTP协议中告诉客户端，需要在 Cookie 里面记录一个Session ID，以后每次请求把这个会话ID发送到服务器，我就知道你是谁了。

【联合工作】

当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session_ID)，如果已包含则说明以前已经为此客户端创建过session，服务器就按照session_ID把这个session检索出来使用(检索不到，会新建一个)，如果客户端请求不包含session_ID，则会为此客户端创建一个session并且生成一个与此session相关联的session_ID，session_ID的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个session_ID将被在本次响应中返回给客户端保存。客户端保存这个session_ID的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。如果客户端的浏览器禁用了 Cookie 怎么办？一般这种情况下，会使用一种叫做URL重写的技术来进行会话跟踪，即每次HTTP交互，URL后面都会被附加上一个诸如 sid=xxxxx 这样的参数，服务端据此来识别用户。

【cookie的删除修改】

Cookie并不提供修改、删除操作。如果要修改某个Cookie，只需要新建一个同名的Cookie，添加到response中覆盖原来的Cookie。如果要删除某个Cookie，只需要新建一个同名的Cookie，并将maxAge设置为0，并添加到response中覆盖原来的Cookie。注意是0而不是负数。如果maxAge为负数，则表示该Cookie仅在本浏览器窗口以及本窗口打开的子窗口内有效，关闭窗口后该Cookie即失效。maxAge为负数的Cookie，为临时性Cookie，不会被持久化，不会被写到Cookie文件中。Cookie信息保存在浏览器内存中，因此关闭浏览器该Cookie就消失了。Cookie默认的maxAge值为–1。

注意：修改、删除Cookie时，新建的Cookie除value、maxAge之外的所有属性，例如name、path、domain等，都要与原Cookie完全一样。否则，浏览器将视为两个不同的Cookie不予覆盖，导致修改、删除失败。

【两者区别】

1、cookie数据存放在客户的浏览器上，session数据放在服务器上
2、cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑*到安全应当使用session
3、session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie
4、cookie的大小限制各大浏览器不一样，一般来说单个cookie保存的数据不超过4K，每个域下可存储30-50个cookie。

Microsoft指出IE8开始增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。
Firefox每个域名cookie限制为50个。
Opera每个域名cookie限制为30个。
chorme每个域名cookie限制为53个。
Safari没有cookie限制。但是如果cookie很多，则会使header大小超过服务器的处理的限制，会发生错误。

5、建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中
6、session保存在服务器，客户端不知道其中的信息；cookie保存在客户端，服务器能够知道其中的信息
7、session中保存的是对象，cookie中保存的是字符串
8、session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的

【注意】参考博客：https://www.cnblogs.com/andy-zhou/p/5360107.html

https://www.cnblogs.com/zr123/p/8086525.html