cookie存储、localStorage

一、cookie:
本地存储，通俗的讲就是把变量存在浏览器（保存页面信息，用户名，密码）
特点：同一个网页cookie共享，cookie必须依赖于服务器环境
有过期时间

1.创建过期时间
toUTCString()--根据世界时间，把date转换为字符串

  var date =new Date();
  date.setDate(date.getDate()+3);//3天后过期

2.存储cookie:通过键值对方式存储

document.cookie ="age=18;expries="+date.toUTCString();
document.cookie ="name=lisi;expries="+date.toUTCString();

3.读取cookie: 类似于json字符串

console.log(document.cookie); //"age=18; name=lisi"

4.读取cookie的值

function  getCookie(key){
     var arr = document.cookie.split("; ")//分号加空格分开
     for（index in arr）{
        var resArr =arr[index].split("=");
        if(resArr[0]==key){
            return  resArr[1];//把键所对应的值返回
        }
    }
}

5.应用
要求：点击button按钮，让value++，存储每次的value值

input.onclick=function(){
      this.value++;
    //设置过期时间
    var date =new Date();
    date.setDate(date.getDate()+2);
    //存储cookie
   document.cookie="count="+this.value+";expries="+date.toUTCString();
}

  //判断是否有cookie的值
if（getCookie("count")）{
  input.value=getCookie("cookie");//getCookie是上面所写的读取值函数

}

二、localStorage:本地存储
特点：

1. 同源策略限制。若想在不同页面之间对同一个localStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
2. 只在本地存储。localStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效。
3. 永久保存。保存的数据没有过期时间，直到手动去除。
4. 存储方式。localStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。
5. 存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
6. 同浏览器共享。localStorage的数据可

1.存储：

 localStorage.a = 3//设置a为3
 localStorage.["a"]="sds";//设置a为“sds”,会覆盖上面的值
 localStorage.setItem("b","fdfs");//设置b的值为fdfs

2.获取

var a1 =localStorage["a"];
var a2 =localStorage.a;
var b =localStorage.getItem("b")

3.清除

localStorage.removeItem("c");//清除c的值