浏览器的本地存储

浏览器的本地存储

传统的本地存储cookie和session

​ 前端和后端进行数据交互的时候，是用http请求的，但是http是一种无状态的协议（所谓无状态，是指收到一个请求，返回一个响应，不关心请求者的身份），http也不是一种持久性的连接，对于请求来说，记住某个用户的身份特征是比较困难的，后来就出现了cookie的机制。

cookie

• 用户端保存请求信息的机制

  cookie的出现，就是为了在用户端保存用户的身份。浏览器会在操作系统里开辟一个文件，专门存放cookie，这个文件只要不删除，就会一直存在。而在每次请求后端时，都会在http的头里面的，带上这个cookie信息，后端就会知道这个http请求是由谁发来的。

• 分号分隔的多个key-value字段

  cookie其实是一个字符串，它的格式就是分号分隔的多个key-value字段。

• 存储在本地的加密文件里

  cookie存储在系统的本地文件里，这是可以通过浏览器操作的，为数不多的文件之一。但是出于安全考虑，这个cookie文件一般的加密的，只能通过浏览器可以操作它。如果直接打开这个cookie文件，就会发现它是一堆加密后的文本，不能直接阅读里面的内容。

• 域名和路径限制

  cookie有域名和路径的限制，一个请求只能操作自己有权限的cookie。

cookie里的字段

• name ：cookie名称

• domain：cookie生效的域名（有作用域限制，二级域名可以使用一级域名的cookie，但是不能其他域名的cookie，也不能操作所属三级域名的cookie）

• path：cookie生效的路径

• expiress：cookie过期时间

• HttpOnly：cookie由服务设置的，并且不允许在用户端进行更改，对于这种类型的cookie，js是操作不到它的，这是为了防止用户端恶意修改cookie，造成安全问题。

cookie的缺点

​ 尽管 cookie的设计目的是在 http中保存用户状态，但在某些情况下，也可以将它作为一个本地存储。但这种使用方式有一个缺点，就是有些信息我们只需在本地存储就能使用，例如：记录用户选择了哪个菜单等等，这完全是为前端展示而设计的，但当这些信息记录到 cookie中时，所有在线请求都会包含这条与后端没有什么关系的 cooKie，增加了网络请求的体积，这样做并不科学。

session

• 服务端保存请求信息的机制

• sessionId通常存放在cookie里

  在接到http请求以后，服务端生成一个sessionId，然后把这个sessionId种到用户的cookie里，这样同一个用户，再次发出请求时，就会根据带过来的cookie，知道这个请求是由谁发的。当然sessionId也不一定都是用cookie来实现的，也可以是放在请求参数里，或者是在http的头里面开辟一个token字段。

• 会话由浏览器控制，会话结束，session失效

  没有设置时间的cookie，只会存在于一次会话中，浏览器一关闭就结束了。而cookie里这个一般不会设置时间的sessionId也就消失了。

H5里面的本地存储

localStorage

• H5新特性

• 有域名限制，不存在作用域概念

  域名是完全匹配的，不像cookie那样有继承性，只能在当前域名下使用。

• 只有key-value

  localStorage 被存在一个对象里，也是一些key-value的键值对，而且这个value只能是基础类型。如果使用了对象等引用类型，它会把对象的toString()结果，作为value存起来，里面的信息也就丢失了。

• 没有过期时间

  只要不删除，它就一直存在

• 浏览器关闭后不消失

  以文件的形式存储在操作系统上，但是也是不可读的。

现实需求：给localStorage设置过期时间

https://blog.csdn.net/weixin_43254766/article/details/83618630

https://blog.csdn.net/ahrl__/article/details/80144756

https://blog.csdn.net/zhaoxiang66/article/details/86703438

https://blog.csdn.net/x550392236/article/details/92836454

https://blog.csdn.net/ahrl__/article/details/80144756

sessionStorage

• 浏览器关闭后消失