cookie、storage的介绍

cookie

cookie(会话跟踪技术)，相当于第一次跟服务器连接后，服务器给你发的一个身份牌，上面可以记录跟你有关的信息（是否登录，购物车等等信息），以后只要再跟服务器通信，必须带着这个令牌，这样一来，服务器会直接知道你身份牌上所有的信息。

cookie存在浏览器的缓存中。
什么是缓存？数据交换的缓冲区－－－－临时储存
cookie的特点：
因为cookie会随着http发给服务器

• 1.只能使用文本文件（如果浏览器可以随意在客户端机器生成文件，比如身份令牌，那将是个定时炸弹，安全问题会变得非常严重）

• 2.文件有大小限制4K（文件若没有大小限制，相当于身份令牌重几百斤，挂在脖子上什么感觉？）

• 3.数量限制，小于50条（一般浏览器限制大概在50条左右，门禁卡里能存下一部蓝光高清么）

• 4.读取有域名限制（不可跨域读取，只能由写入cookie的 同一域名 的网页进行读取。简单来说，谁写的cookie，谁才有权利读取）

• 5.时效限制（每个cookie有时效，最短的有效期是：会话级别(关闭浏览器，cookie销毁)；

注意：安全学的基本理论：密码锁每次打开都需要重新输入密码，如果只输入一次密码，以后不在验证，就没有安全可言）

document.cookie
打开百度，在控制面板中输入document.cookie就会弹出百度的cookie。如下：

但是你肯定看不懂，因为百度的cookie是加密的
设置
会话级默认路径：
document.cookie = “name=abc”
cookie的格式要求，名称＝值
在cookie 的名或值 中 不能使用分号（;）、逗号（,）、等号（=）以及空格这是cookie的赋值规则

指定有效期：
设置cookie的保存时间，通过给expires添加一个日期，设置cookie的过期时间
此处可以借用Date();
var date = new Date();
date.setDate(date.getDate()+28);
表示获取当前日期的天数，增加28天之后，重新设置给日期，此时date就表示未来的某个时间
document.cookie = “name=abc;expires=” + date;
此句表示，此条cookie在date的时间时效，而date的时间为当前日期加上28，也就是28天之后cookie失效
指定路径：
document.cookie = “user=admin;path=/;expires=”+d;

获取
var str = document.cookie;
str返回当前cookie的值，以字符串的形式

删除
删除cookie，相当于将cookie的有效时间设置为负。

cookie的封装

// setCookie的封装
function setCookie(key,val,options){
    options = options || {};
    var path = "";
    if(options.path) path = ";path=" + options.path;
    var expires = "";
    if(options.expires){
        var d = new Date();
        d.setDate(d.getDate()+options.expires);
        expires = ";expires=" + d;
    }
    document.cookie = key + "="+ val + path + expires;
}

// removeCookie的封装
function removeCookie(key,options){
    options = options || {};
    options.expires = -1;
    setCookie(key,132,options);
}

// getCookie的封装
function getCookie(key){
    var arr = document.cookie.split("; ");
    for(var i=0;i<arr.length;i++){
        if(arr[i].split("=")[0] === key){
            return arr[i].split("=")[1];
        }
    }
    return "";
}

本地存储

1. cookie
   特点： 小(~4k),服务器环境(每次都会随着请求，发往服务器)，过期时间，完全兼容
   document.cookie=值
2. localStorage 、 sessionStorage
   特点： 大(~5M),不会发往服务器,没有过期时间
   共同点：
   不安全、不能跨域、不能跨浏览器,写入的都是字符

LocalStorage

window的属性 返回 一个localStorage对象

对象的属性：
    localStorage.key=value   设置，修改
    localStorage.key;        获取
    delete localStorage.key  删除  localStorage.key = undefined
    for-in localStorage      枚举 批量删除

方法：√
    localStorage.setItem(key,value) 设置、修改
    localStorage.getItem(key)       获取
    localStorage.removeItem(key)    删除一个
    localStorage.clear()            删除所有 ×

事件：
    window.onstorage 检测key 发生了变化，事件对象
        ev.key 返回 变化的key
        ev.newValue 变化后的值
        ev.oldValue 变化前的值

    案例：拖拽同步
    
写到localStorage里面的都是字符
    json    ->    str 序列化
    str     ->    json 反序列化，实体化

sessionStorage

生命周期 会话结束时
属性：同上
方法：同上