6.浏览器原理之浏览器本地存储

1.Cookie

1）cookie的定义和特性

定义：cookie视最早被提出来的本地存储方式，在此前，服务器端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，cookie就出现了。cookie的大小只有4KB,它是一种纯文本文件，每次发起HTTP请求，都会携带cookie。
cookie的特性：

• cookie一旦创建成功，名称就无法修改
• cookie是无法跨域名的，也就是说a域名和b域名下的cookie是无法共享的，这也是由cookie的隐私安全性决定的，这样就能够阻止非法获取其他网站的cookie。
• 每个域名下cookie的数量不能超过20个，每个cookie的大小不能超过4KB
• cookie有安全问题，如果cookie被拦截了，那就可能获得session的所有信息，即使加密也于事无补，不需要知道cookie的意义，只要转发cookie就能达到目的
• cookie在请求一个新的页面的时候都会被发送过去

如果需要域名之间跨域共享cookie，有两种方法：

• 使用Nginx反向代理
• 在一个站点登录之后，往其他网站写cookie。服务端的session存储到一个节点，cookie存储sessionid。

2） cookie的使用场景

• 最常用的使用场景就是cookie和session结合使用，我们将sessionid存储到cookie中，每次发请求都会携带这个sessionid，这样服务端就知道是谁发起的请求，从而响应相应的信息。
• 可以统计页面的点击次数

3）cookie有哪些字段，作用分别是什么

cookie由以下字段组成：

• Name：cookie的名称
• Value：cookie的值，对于认证cookie，value值包括web服务器所提供的访问令牌
• Domain：可以访问该cookie的域名，cookie机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的cookie。当需要实现单点登录方案时，cookie的上述特性非常有用，然而也增加了cookie受到攻击的危险，比如攻击者可以借此发动会话定制攻击。因而，浏览器禁止在Domain属性设置.org,.com等通用顶级域名，以及在国家及地区顶级域名下注册的二级域名，以减小攻击发生的范围。
• Path：可以访问此cookie的页面路径。比如domain是abc.com,path是/test,那么只有/test路径下的页面才可以读取此cookie。
• Expires/Max-size:此cookie的超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是session，意思是cookie会和session一起失效。当浏览器关闭（不是浏览器标签页，而是整个浏览器）后，此cookie无效。
• Size：cookie的大小
• HTTP: 该字段包含HTTPOnly属性，该属性用来设置cookie能否通过脚本来访问，默认为空，即可以通过脚本访问。
  在客户端是不能通过js代码去设置一个httpOnly类型的cookie的，这种类型的cookie只能通过服务端来设置。
  该属性用于防治客户端脚本通过document.cookie属性访问cookie，有助于保护cookie不被跨站脚本攻击窃取或篡改。但是HTTPOnly的应用仍然存在局限性，一些浏览器可以阻止客户端脚本对cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头。
• Secure：指定是否使用HTTPS安全协议发送Cookie

cookie总结：
服务器端可以通过Set-Cookie端响应头来配置cookie信息。一条cookie信息包括了5个属性，expires，domain，path，secure，HttpOnly。其中，expires制定了cookie失效的时间，domain是域名，path是路径，domain和path一起限制了cookie能够被哪些url访问。secure规定了cookie只能在确保安全的情况下传输，HttpOnly规定了这个cookie只能被服务器访问，不能使用js脚本访问。

2.LocalStorage

LocalStorage是HTML5引入的特性，由于有的时候我们存储的信息较大，cookie就不能满足我们的需求，这时候LocalStorage就派上用场了。

1）LocalStorage的优点

• 在大小方面，LocalStorage的大小一般为5MB,可以储存更多的信息
• LocalStorage是持久化存储，并不会随着页面的关闭而消失，除非主动清理，不然会永久存在
• 仅储存在本地，不像Cookie那样每次HTTP请求都会被携带

2）LocalStorage的缺点

• 存在浏览器兼容问题，IE8以下版本的浏览器不支持
• 如果浏览器设置为隐私模式，那我们将无法读取到LocalStorage
• LocalStorage受到同源策略的限制，即端口，协议，主机地有任何一个不同，都不会访问

3）LocalStorage的常有API

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

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

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

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

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

4)LocalStorage的使用场景

• 有些网站有换肤的功能，这时候就可以将换肤的信息存储在本地的LocalStorage中，当需要换肤的时候，直接操作LocalStorage即可
• 在网站中的用户浏览信息也会存储在localStorage中，还有些网站的一些不常变动的个人信息等也可以存储在本地的LocalStorage中

3.SessionStorage

定义：SessionStorage和LocalStorage都是在HTML5才提出来的存储方案，SessionStorage主要用于临时保存同一个窗口（或标签页）的数据，刷新页面时不会删除，关闭窗口或者标签页之后将会删除这些数据。
SessionStorage和LocalStorage对比：

• SessionStorage和LocalStorage都是本地进行数据存储
• SessionStorage也有同源策略的限制，但是SessionStorage有更加严格的限制，SessionStorage只有在同一浏览器的同一个窗口下才能够共享
• SessionStorage和LocalStorage都不能被爬虫爬取

SessionStorage的常用API：

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

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

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

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

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

SessionStorage的使用场景：
由于SessionStorage具有实效性，所以用来存储一些网站的游客登录的信息，还有临时的浏览器记录信息。当关闭网站之后，这些信息也就随之消除了。

4.cookie，localStorage，SessionStorage区别

相同点：都是将数据存储在客户端的方法。
不同点：

• 存储数据的大小不同
  cookie数据大小不能超过4KB。sessionStorage和localStorage虽然有存储大小的限制，但是比cookie大得多，一般为5MB。
• 有效时间不同
  cookie 在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
  sessionStorage 当浏览器窗口关闭后自动删除。
  localStorage 如果不主动清除，就永久保留。
• 数据与服务器之间的交互方式不同
  cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
  sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

5.IndexDB

IndexDB：是被正式纳入HTML5标准的数据库存储方案，它是NoSQL数据库，用键值对进行存储，可以进行快速读取操作，非常适合web场景，同时用JavaScript进行操作会非常方便。
IndexDB具有以下特点：

• 键值对存储：IndexedDB内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括JavaScript对象。对象仓库中，数据以”键值对“的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
• 异步： IndexedDB操作时不会锁死浏览器，用户依然可以进行其他操作，这与LocalStorage形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
• 支持事务： IndexedDB支持事务（transaction),这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前到状态，不存在只改写一部分数据的情况。
• 同源限制：IndexedDB受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
• 储存空间大：IndexedDB的存储空间比LocalStorage大得多，一般来说不少于250MB，甚至没有上限。
• 支持二进制存储：IndexedDB不仅可以存储字符串，还可以存储二进制数据（ArrayBuffer对象和Blob对象）。