理解cookie、localStorage、sessionStorage的区别及应用实例

最新推荐文章于 2022-03-22 14:49:11 发布

01xm

最新推荐文章于 2022-03-22 14:49:11 发布

阅读量1.3k

点赞数 3

分类专栏：浏览器文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/Bon_nenul/article/details/121275047

版权

浏览器专栏收录该内容

4 篇文章 0 订阅

订阅专栏

cookie、localStorage、sessionStorage

HTTP无状态

首先我们应该了解HTTP本身是无状态的，也就是你浏览一个网页关闭后，第二次再浏览这个网页，服务器也没发现是同一个人浏览的。但现实生活中，我们如果在淘宝浏览了某个商品并加入购物车后，之前我们会发现淘宝在首页会给你经常推送你加入购物车的哪一类商品，为了弥补HTTP的无状态，Cookie就出现了。

cookie的基本概念

cookie其实就是一种存储机制而已，当我们第一次请求网页内容的时候是没有任何cookie的，服务器在收到请求以后会在HTTP响应里添加头部Set-Cookie，并且在Set-Cookie里进行标识，在下一次请求的时候浏览器就会在HTTP请求里添加头部Cookie，并且用上Set-Cookie里的标识，这样服务器就可以给不同的用户匹配不同的内容了。这里有个重点，自打服务器给了Set-Cookie以后，以后每一次HTTP请求都要把Cookie数据传送给服务器，如果每一次都要把含有大量数据的Cookie发送给服务器，那无疑是一种自杀行为，而且cookie是在94年设计出来的，那个时候的带宽资源比现在要紧张很多，因此就把cookie设计的很小，不能超过4KB，但大部分情况会更小。

在这里插入图片描述

localStorage、sessionStorage

随着科技的进步，网页的功能越来越丰富，有很多一些个人设置服务器并不需要获取，比如你上某个网站每次都要设置"关灯模式"，这些个人设置完全只保存在客户端里，随着HTML5的出现，就有了Web存储，其中两个重要的对象就是localStorage和sessionStorage了。
流程： 当用户第一次请求服务器的时候，服务器响应内容，并且附加可操控网页的JS，当用户操作JS进行个人设置的时候，这些个人设置就可以通过Web存储机制保存在浏览器里了。
如果用localStorage就会永远保存在浏览器里，当然可以自行删除 ；如果用sessionStorage也会保存在浏览器里，只不过关闭窗口就会被删除。localStorage虽然保存下来，但它本身不参与服务器通信，这样看Web存储的容量比cookie大非常多，但是因为localStorage是同步的机制，会影响浏览器渲染进度。

简述什么是localStorage、sessionStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题 (cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种： localStorage和 sessionStorage
1、sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
2、localStorage（长期存储）：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在。

使用方法

注意: sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON,所以这里就只列举localStorage。

1、保存

//对象
const info = { name: 'hou', age: 24, id: '001' };
//字符串
const str="haha";
localStorage.setItem('hou', JSON.stringify(info));
localStorage.setItem('zheng', str);

2、获取

var data1 = JSON.parse(localStorage.getItem('hou'));
var data2 = localStorage.getItem('zheng');

3、删除

//删除某个
localStorage.removeItem('hou');
//删除所有
localStorage.clear();

4、监听

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);
})

5、浏览器中查看
在这里插入图片描述

7、注意点

localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。

sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。

localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中）

sessionStorage作用域是窗口、协议、主机名、端口。

localStorage的优势与局限

localStorage的优势

(1) localStorage拓展了cookie的4K限制。

(2) localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。
localStorage的局限

(1)浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性。

(2)目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。

(3)localStorage在浏览器的隐私模式下面是不可读取的。

(4)localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。

(5)localStorage不能被爬虫抓取到。

(6) localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。

cookie、localStorage、sessionStorage的区别

	cookie	localStorage	sessionStorage
大小	4Kb	10Mb	5Mb
兼容	H4/H5	H5	H5
访问	任何窗口	任何窗口	同一窗口
有效期	手动设置	无	到窗口关闭
存储位置	浏览器和服务器	浏览器	浏览器
与请求一起发送	是	否	否
语法	复杂	简易	简易