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

一、Web本地存储

【含义说明】

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

seesionStorage（临时存储）：针对每一个session进行数据存储。只有当浏览器关闭窗口后，数据才会被清除。
注意：本地存储都是不能跨域访问的

【使用方法】

1. 保存数据到本地

    const info = {         name: 'Lee',         age: 20,         id: '001'     };     sessionStorage.setItem('key', JSON.stringify(info));     localStorage.setItem('key', JSON.stringify(info));

2. 从本地存储获取数据

    var data1 = JSON.parse(sessionStorage.getItem('key'));     var data2 = JSON.parse(localStorage.getItem('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：存在于客户端即浏览器，可以保存用户的账号密码，用于识别用户，当浏览器雨服务器交互时，会同时发送cookie。

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

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

【联合工作】

【cookie的删除修改】

【两者区别】

8、session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的

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

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

文章来源: localStorage , SsessionStorage , Cookie , Session的联系与区别

标签