浏览器存储技术

[Genluo]

一、cookie

1、属性选项

• expires和Max-Age

cookie失效时间，为GMT格式，通过new Date().toUTCString()获取，如果没有显式设置，则称之为会话cookie，在浏览器关闭的时候清除

• domain和path

domain为域名，path为路径，两者加起来构成url，domain和path一起限制cookie能被那些url访问，首先判断的是domain，如果没有设置这两个值，将会使用默认值，domain设置为该cookie的网页所在的域名，path默认为该cookie所在的目录

• secure

用来设置cookie只有在确定的安全请求才能发出去，当请求是https或者其他安全协议的时候，包含secure的请求才能发送至服务器，如果想在客户端通过js设置secure的cookie的时候，必须保证网页在https的协议下，在http协议的网页是不能设置成功的

• httpOnly

这个设置是设置的cookie能否通过js进行访问，这个设置只能在服务器端进行设置，为了保证安全，可以有效防止xss攻击

2、如何设置cookie？

1）服务器端进行设置

服务通过response header 中的Set-Cookie进行设置，如果需要设置多个cookie，需要分别设置多个Set-Cookie,通过服务器可以设置 expires、domain、path、secure、HttpOnly

2）客户端进行设置

通过document.cookie进行设置，同样设置多个cookie需要重复执行document.cookie，通过js可以设置 expires、domain、path、secure（需要在https才可设置成功）

document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/";

• expires

如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间。如果不设置，cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁

• domain

domain指定了 cookie 将要被发送至哪个或哪些域中。默认情况下，domain 会被设置为创建该 cookie 的页面所在的域名，所以当给相同域名发送请求时该 cookie 会被发送至服务器。

浏览器会把 domain 的值与请求的域名做一个尾部比较（即从字符串的尾部开始比较），并将匹配的 cookie 发送至服务器。

• path

cookie 一般都是由于用户访问页面而被创建的，可是并不是只有在创建 cookie 的页面才可以访问这个 cookie。
因为安全方面的考虑,默认情况下，只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问。
即path属性可以为服务器特定文档指定cookie，这个属性设置的url且带有这个前缀的url路径都是有效的。

• secure

secure选项用来设置cookie只在确保安全的请求中才会发送。当请求是HTTPS或者其他安全协议时，包含 secure 选项的 cookie 才能被发送至服务器。

把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息。机密且敏感的信息绝不应该在 cookie 中存储或传输，因为 cookie 的整个机制原本都是不安全

注意：如果想在客户端即网页中通过 js 去设置secure类型的 cookie，必须保证网页是https协议的。在http协议的网页中是无法设置secure类型cookie的。

3、cookie进行编码

cookie其实是个字符串，但这个字符串中逗号、分号、空格被当做了特殊符号。所以当cookie的 key 和 value 中含有这3个特殊字符时，需要对其进行额外编码，一般会用escape进行编码，读取时用unescape进行解码；可以尝试escape('哈哈，Genluo')输出什么

4、注意

• 只有当domain、path、name都相同的cookie才能覆盖
• domain设置带点的时候，任何 subdomain 都可以访问，包括父 domain，当不带点的时候，只有完全一样的域名才能访问
• 当通过ip进行访问的时候，domain为当前ip
• 不同的浏览器存放的cookie位置不一样，也是不能通用的。
• cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。
• 我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域
• 一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个。
• 每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。
• cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁
• max-age默认值是-1，这是类似于session的操作，在页面关闭是清除，另一种是情况是设置为0，这种是相当于删除这个操作，另一种情况是设置为正数，这只代表创建时间多少秒后设置的cookie过期

二、locaStorage

1、特点

• 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
• 存储的信息在同一域中是共享的。
• 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
• 大小：据说是5M（跟浏览器厂商有关系）
• 在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
  localStorage受同源策略的限制

2、方法

• window.localStorage.setItem(key, value)
• window.localStorage.getItem(key,value)
• window.localStorage.removeItem(key)
• window.localStorage.clear()
• window.localStorage 遍历可以使用

3、事件storage

当storage发生改变的时候进行触发，事件的回调函数中有一个参数是event，提供了一些实用属性，例如key、oldValue、newValue、uurl/uri

三、sessionStorage

1、特点

用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另一个页面，sessionStorage也是没有的。

2、共享

比localStorage更加严格，不仅要求协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下

sf.gg总结的前端发存储

四、其他的几种存储（不常用）

• Web Sql Database
  因为web标准已经放弃此种方式，所以不做深入讨论
• indexedDB
  indexDB 掘金
  html5 进阶 - indexedDB