深入理解Cookie与Web存储-优快云博客

数据存储

Cookie

存储限制: 4kb 20个

最初是在客户端用于存储会话信息的
在性质上是绑定在特定域名下的
当设定cookie后,在给创建它的域名发送请求时,都会包含这个cookie
所以 cookie越大完成服务器请求时间就越长

Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com;

path=/; secure

指定了一个叫name的cookie,它会在格林威治时间2007年1月22日 7:10:24失效同时对于www.wrox.com 和 wrox.com 的任何子域有效

name 名称(必须是经过URL编码的)
value 存储在cookie中的字符串值
doamin cookie对那个域是有效的
path 路径可以指定域名下哪个路径应该发送cookie
expires 失效时间
secure 安全标志指定后SSL连接(https)才发送到服务器
发送时只有名值对会被发送

JavaScript中的cookie

document.cookie

由分号隔开的键值对字符串
经过URL编码,必须使用decodeURIComponent() 解码
document.cookie = encodeURIComponent("haha") + "=" +encodeURIComponent("xixi") 会添加到cookie字符串末尾,不会覆盖,除非同名
可通过修改过期时间来删除cookie

var CookieUtil = {
  get: function(name){
    var cookieName = encodeURIComponent(name) + "=",
        cookieStart = document.cookie.indexOf(cookieName),
        cookieValue = null;

        if(cookieStart > -1){
          var cookieEnd = document.cookie.indexOf(";", cookieStart)
          if(cookieEnd == -1){
            cookieEnd = document.cookie.length
          }
          cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd))
        }

        return cookieValue
  },
  set: function(name, value, expires, path, domain, secure){
    var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value)
    if(expires instanceof Date){
      cookieText += "; expires=" + expires.toGMTString()
    }
    if(path){
      cookieText += "; path=" + path
    }
    if(domain){
      cookieText += "; domain=" + domain
    }
    if(secure){
      cookieText += "; secure"
    }
    document.cookie = cookieText
  },
  unset: function(name, path, domain, secure){
    this.set(name, "", new Date(0), path, domain, secure)
  }
}

子cookie

为了绕开单域名下cookie数量的限制
name=name1=value1&name2=value2&name3=value3

HTTP专有cookie

只能从服务端读取

Web存储机制

5M限制

Storage
- clear() 删除所有值
- getItem(name) 获取name值
- key(index) 获得index处的name
- removeItem(name) 删除name
- setItem(name, value) 设置name的值为value
sessionStorage
- Storage的一个实例
- 存储特定于某个会话数据,只保持到浏览器关闭
- 跨越页面刷新而存在
localStorage
- Storage的一个实例
- 访问同一个localStorage对象,页面必须是同源
storage事件
- 相关实例操作都会触发
- event属性
  - domain 发生变化存储空间的域名
  - key 设置或者删除的键名
  - newValue 设置值是新值,删除值是null
  - oldValue 键被更改之前的值