浏览器的本地存储

浏览器本地存储的方式和使用场景特别重要

cookies

cookies的大小只有4kb，他是一种纯文本文件，每次发起http请求都会携带cookies

特性：

• 一旦创建成功，名称就无法更改

• 无法跨域名，可以阻断非法获取其他网站的cookies

• 每个域名下的cookies不能超过20个，每个大小不能超过4kb

• 如果cookies被拦截，那就可以获得session所有信息，无需知道cookies的意义，只要转发cookies就能达到目的

• cookies在请求一个页面的时候也会被发送过去

需要域名之间跨域共享cookies的方法

1. 使用nginx反向代理
2. 在一个站点登陆之后，往其他网站写cookies，服务端的session存储到一个节点中，cookies存储sessionId

使用场景：

• 登陆时候的验证码，通过将sessionId存储到cookies中，每次发请求都会携带这个sessionId，这样服务端就知道是谁发出的请求，从而响应
• 统计页面的点击次数

LocalStorge

优点：

• 大小一般5MB，可以存储更多信息

• 是持久存储，不会随着页面的关闭而消失，除非主动清理，不然永久存在

• 仅存储在本地，不像cookies一样每次HTTP请求都被携带

缺点：

• IE8以下不兼容

• 若浏览器设置为隐私模式，无法读取localstorage

• 受到同源策略的限制，即端口、协议、主机有任何一个不同都不会访问

API

// 保存数据到 localStorage
localStorage.setItem('key', 'value');

// 从 localStorage 获取数据
let data = localStorage.getItem('key');

// 从 localStorage 删除保存的数据
localStorage.removeItem('key');

// 从 localStorage 删除所有保存的数据
localStorage.clear();

// 获取某个索引的Key
localStorage.key(index)

使用场景：

• 有些网站有换肤功能，将换肤信息存储在localstorage中

• 用户浏览信息也存储在localstorage中，主要存储一些不常变动的信息

• SessionStorage

主要用于临时保存同一窗口（或标签页）的数据，刷新页面不会删除，关闭窗口或者标签页才会删除这些数据

API

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

// 获取某个索引的Key
sessionStorage.key(index)

cookies有哪些字段和作用

服务器端可以使用 Set-Cookie 的响应头部来配置cookie 信息。

一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnly。

其中 expires 指定了 cookie 失效的时间，

domain 是域名

path是路径

domain 和 path 一起限制了 cookie 能够被哪些 url 访问。

secure 规定了 cookie 只能在确保安全的情况下传输，HttpOnly 规定了这个 cookie 只能被服务器访问，不能使用 js 脚本访问

Cookies LocalStorage SessionStorage的区别特别重要

• cookie： 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4kb 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。

• sessionStorage： html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。

• localStorage： html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。

当需要存储大量数据的时候，就可以采用浏览器的indexDB，内部采用对象仓库的形式存储数据

前端的储存方式有哪些

• cookies： 优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k，⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，使⽤起来麻烦，需要⾃⾏封装；

• localStorage：HTML5加⼊的以键值对(Key-Value)为标准的⽅式，优点是操作⽅便，永久性储存（除⾮⼿动删除），⼤⼩为5M，兼容IE8+

• sessionStorage：与localStorage基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与cookie、localStorage不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式

• IndexedDB： 是被正式纳⼊HTML5标准的数据库储存⽅案，它是NoSQL数据库，⽤键值对进⾏储存，可以进⾏快速读取操作，⾮常适合web场景，同时⽤JavaScript进⾏操作会⾮常便利

介绍一下indexDB

• 键值对储存：IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误

• 异步：IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现

• 支持事务：IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

• 同源限制： IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

• 储存空间大：IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

• 支持二进制储存：IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）

四者区别

	Cookie	SessionStorage	LocalStorage	indexDB
存储大小	4k	5M或更大	5M或更大	无限
存储时间	可指定时间,没指定关闭窗口就失效	浏览器窗口关闭就失效	永久有效	永久有效
作用域	同浏览器，所有同源标签页	当前标签页	同浏览器，所有同源标签页
存在于	请求中来回传递	客户端本地	客户端本地	客户端本地
同源策略	同浏览器，只能被同源同路径页面访问共享	自己用	同浏览器，只能被同源页面访问共享