服务器网页localstorage,浏览器存储技术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是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在内存、数据库、文件中。