浏览器存储技术cookie、localStorage、indexDB等

首先我们说一下以下讲的数据不是储存在通常的数据库中,而是储存在客户端浏览器中的,基于这个特点,浏览器的同源策略限制了这些客户端存储的分界点是当前域名,不可能你在juejin.im里面存的数据能在baidu.com里读取。

Cookie

cookie通常是由服务器生成并设置生命周期,储存在客户端的数据。大小为4k。每次请求都会把cookie携带在HTTP header中,对请求性能有影响。

localStorage

LocalStorage由客户端设置,除非被清理否则一直存在,大小为5M,不参与服务端通信。

代码示例

const ls = window.localStorage
//设置
ls.setItem('name', '沧海')
ls.setItem('age', 18)
//读取
ls.getItem('name')
//清除
ls.removeItem('name')
//清除所有数据
ls.clear()
复制代码

注意:LocalStorage只支持string类型的存储,也就是说如果存储对象时需要使用JSON.stringify(),取出时使用JSON.parse().

SessionStorage

SessionStorage在关闭当前域名下的所有标签页时清理,大小为5M,不参与服务端通信。API和LocalStorage相同,唯一区别就是生命周期不同。

indexDB

indexDB是一个对象仓库,存储的都是JS对象,并且它除非被清理否则一直存在,大小没有限制,不参与服务端通信。

这里补充一个储存在服务端的session技术

Session的诞生:我们知道用浏览器打开互联网上的网页时,是通过HTTP协议来通信的,HTTP有个特点就是无状态的,这个特点带来的一个问题是我现在在a页面登录了,但是我在b页面也希望我是登录的状态,怎么办呢?a,b是不同的两个页面,他们的之间的HTTP请求是无状态的,没有关联。也就是说无法在b页面读到我在a页面登录的信息。这个时候聪明的人们利用cookie这种客户端存储技术来储存登录信息。他在同一个域名下是通用的,通过前面对cookie的介绍我们也知道了每次HTTP请求都会携带Cookie信息,所以我们现在可以就在b页面请求的时候就能读取到我们的登录信息啦。

呼~是不是很开心,我们终于解决了这个问题。不过,Cookie也是有它本身的限制的。首先它的存储空间很小只有4k,并且对用户是可见的,是可以随意更改的,这非常不安全。那怎么办呢?这个时候Session就闪亮登场了,它储存在服务端。有个唯一标识SessionId。其实准确的说session是一个抽象概念,开发者为了实现中断和继续等操作,将 user agent 和 server 之间一对一的交互,抽象为“会话”,进而衍生出的“会话状态”。

Session实现:

  • 实际上大多数的应用都是用Cookie来实现Session跟踪的,第一次创建Session的时候,服务端会在HTTP协议中告诉客户端,需要在 Cookie 里面记录一个Session Id,以后每次请求把这个会话ID发送到服务器,我就知道你是谁了

  • 还有一种情况是客户端的浏览器禁用了Cookie。一般这种情况下,会使用一种叫做URL重写的技术来进行会话跟踪,即每次HTTP交互,URL后面都会被附加上一个诸如 sid=xxxxx 这样的参数,服务端据此来识别用户。

Session总结

Session是在服务端保存的一个数据结构,用来跟踪用户的状态,这个数据可以保存在内存、数据库、文件中。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章