localStorage、sessionStorage、cookie的使用

记录localStorage、sessionStorage和cookie的使用。

h5本地存储：

介绍

• localStorage
  永久保存 不同页面和标签页可以共享 关闭浏览器不会清除
• sessionStorage
  会话保存 不同页面和标签页不能共享 关闭浏览器会清除

存储内容：数组、图片、json、样式、脚本等只要能序列化为字符串的都可以
大小：每个域名5M
遇到的问题：SecurityError (DOM Exception 18): The operation is insecure.
需要在服务器状态下使用，如果以file://状态使用会DOM异常的错误

原型

• clear()
• getItem(key)
• key(index)
• length
• removeItem(key)
• setItem(key, data)

使用

setItem()

window.localStorage.setItem('name', 'tanyue'); //设置名称为“name”的值   关闭浏览器不会消失
window.localStorage.setItem("email", 'tanyuetz163.com'); //设置名称为“email”的值   关闭浏览器不会消失
window.sessionStorage.setItem("email", 'tanyuetz163.com'); //获取名称为“email”的值   关闭浏览器消失

getItem()

var local = window.localStorage.getItem('name'); //获取name的值
var session = window.sessionStorage.getItem('email'); //获取email的值
console.log(local);
console.log(session);

遍历

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);
    }

removeItem()

window.localStorage.removeItem('name'); //移除name属性
window.sessionStorage.removeItem("email"); //移除email属性

clear()

window.localStorage.clear(); //清除localStorage

cookie

当网页要发送http请求时，浏览器会首先检查是否有相应的cookie,有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动添加cookie,因此身份验证信息会很适合放置在cookie中

• 大小：
  每个个域名下大小为4k,每个域名下数量最多为20个
• 设置cokie:
  `"key=name; expires=Thu, 25 Feb 2017 04:18:00 GMT;
  domain=xxx.xxx.com; path=/; secure; HttpOnly"`(属性之间用分号和空格隔开)

方法：

document.cookie = "name=Jonh; age=12; class=111";
//不能通过这种方式设置多个cookie

//只能通过这种多次添加的方式设置cookie
document.cookie = "name=abc";
document.cookie = "age=22";
//修改cookie  重新赋值
document.cookie = "class=222";
//删除删除 cookie
//删除一个cookie 也挺简单，也是重新赋值，只要将这个新cookie的expires 选项设置为一个过去的时间点就行了。但同样要注意，path/domain/这几个选项一定要旧cookie 保持一样。
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = "name=Jonh; expires=" + date.toGMTString();
//cookie编码
// cookie其实是个字符串，但这个字符串中逗号、分号、空格被当做了特殊符号。所以当cookie的 key 和 value 中含有这3个特殊字符时，需要对其进行额外编码，一般会用escape进行编码，读取时用unescape进行解码；当然也可以用encodeURIComponent/decodeURIComponent或者encodeURI/decodeURI