捋一下浏览器存储 —— cookie/webstorage

总结

cookie 与 webStorage 的主要区别

webStorage 包括 localStorage 和 sessionStorage

1. 生命周期：cookie 可以设置过期时间，max-age 设置为0时直接删除，不设置或设置为负值时浏览器关闭时失效；localStorage 除非手动或代码删除，sessionStorage 在当前会话关闭时删除
2. 大小：cookie 远远小于 webStorage
3. 传递方式：默认自动带，webStorage 不会主动传递
4. 易用性：cookie 需要自己封装接口，webStorage 接口友好

应用场景

• cookie 尽可能存储信息精简，登录状态，购物车等
• localStorage 可以实现跨页面传递数据，存储量大
• sessionStorage 常用于单页应用中
• 隐身模式，用 cookie

基本概念

不同点：

–	cookie	localStorage	sessionStorage
生命周期	相关属性：expires<max-age(优先级)	除非手动删除或代码删除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
大小	4K左右，取决于浏览器	一般为5MB	一般为5MB
传递方式	http 请求自动携带，有 secure 时 http 请求不会自动携带	仅在浏览器中保存，不会主动参与服务器通信	同 localStorage
作用域	在所有同源窗口中是共享的	在所有同源窗口中是共享的	不在不同的浏览器窗口中共享，即使是同一个页面
优点	1. 具有生命周期 2. 请求中自动携带 3. 使用简单	1.数据存储量大2.减少流量消耗3.使用灵活	同 localStorage
缺点	1. 安全隐患 2. 大小和长度限制 3. 增加流量消耗	1. 浏览器隐身模式下不能读取 2. 本质是读写文件，写入数据量大会卡顿 3. 不能被爬虫获取 4. pc端兼容性	同 localStorage
易用性	需要自行封装，源生的cookie 接口不友好	源生接口灵活，可以再次封装对 Object 和Array 有更好的支持	同 localStorage

相同点：都保存在浏览器端，都是同源的。

操作方法

cookie属性

name

cookie 的名字，一个域名下绑定的 cookie, name 不能相同，相同的值会被覆盖。

value

cookie 的值

domain

cookie 绑定的域名，默认自动绑定到执行语句的当前域

path

默认为 ‘/’

expires/max-age

• expires，默认浏览器结束会话时，cookie 删除
• 要保留 cookie，可以设置 expires 属性为未来的一个时间节点，但这个属性已经逐渐被 max-age 取代
• max-age 以秒为单位，为正数时，cookie 会在 max-age 秒之后，被删除，当 max-age 为负数时，表示临时储存，浏览器关闭时 cookie 被删除，当 max-age 为0时，删除 cookie

secure

该属性为 true 时，cookie 只会在 https 和 ssl 等安全协议下传输

httponly

该属性为 true 时，不能通过 js 脚本来获取 cookie 的值，能有效防止 xss 攻击

cookie 常用操作方法

产生：浏览器访问服务器时由服务器返回一个 Set-Cookie 响应头，当浏览器解析这个响应头时设置 cookie

//添加 cookie
function setCookie(key, value, iDay) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + iDay);
    document.cookie = key + '=' + value + ';expires=' + oDate;
}
//删除cookie
function removeCookie(key) {
    setCookie(key, '', -1);//这里只需要把Cookie保质期退回一天便可以删除
}
//获取cookie
function getCookie(key) {
    var cookieArr = document.cookie.split('; ');
    for(var i = 0; i < cookieArr.length; i++) {
        var arr = cookieArr[i].split('=');
        if(arr[0] === key) {
            return arr[1];
        }
    }
    return false;
}

webStorage 操作方法

localStorage 和 sessionStorage 有相同的操作方法，如setItem、getItem、removeItem 等。

setItem

// 将 value 存储到 key 字段
localStorage.setItem("key", "value");

getItem

// 获取指定key本地存储的值
var value = localStorage.getItem("key");

removeItem

// 删除指定key本地存储的值
localStorage.removeItem("key");

clear

// 清除所有的key/value
localStorage.clear();

点操作和[ ]

// 类似普通对象
storage.key1 = "hello"; storage["key2"] = "world";

key 和 length

// sessionStorage 和 localStorage 提供的 key() 和 length 可以方便的实现存储的数据遍历。
var storage = window.localStorage;
for(var i=0, len=storage.length; i<len;i++){
    var key = storage.key(i);     
    var value = storage.getItem(key);     
    console.log(key + "=" + value);
}

应用场景

1. cookie 尽量精简，用于判断用户是否登录，其他情况可以用 webStorage。

浏览器支持判断：
if(navigator.cookieEnabled) {
  alert("你的浏览器支持cookie功能");//提示浏览器支持cookie  
} else {
  alert("你的浏览器不支持cookie");//提示浏览器不支持cookie   
}

• cookie 的作用域：Domain 和 path，domain 告诉浏览器当前要添加的 cookie 的域名归属，没有指定默认就是当前域名；path 告诉浏览器当前要添加的 cookie的路径归属，没有指定默认就是当前路径。
• 浏览器提交的 cookie 需要满足：当前域名或者父域名下（域名更短更高级）的 cookie；当前路径或者父路径下的 cookie

2. localStorage 和 sessionStorage 存储数据大小比 cookie 大。localStorage 可以用来跨页面传递数据，sessionStorage 可以用来保存一些临时的数据，防止用户刷新页面之后丢失。

3. 浏览器的隐身模式:此模式下 webStorage 相关对象仍然存在，但是相关操作会报异常，如果是隐身模式，用 cookie

// 判断隐身模式
var fs = window.RequestFileSystem || window.webkitRequestFileSystem;
if (!fs) {
  console.log("check failed?");
} else {
  fs(window.TEMPORARY,100,function(){
      alert('非隐身模式');
  },function(){
      alert('隐身模式');
  });
}