js Cookie和localStorage的使用和区别

Cookie的使用

• Cookie简介：
  Cookie，有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。定义于 RFC2109 和 2965 中的都已废弃，最新取代的规范是 RFC6265[1]。（可以叫做浏览器缓存）（百科上的正经解释，反正我也找不到更好的解释了n.n）

• Cookie需要放在服务器环境下,所以首先自己需要配置一个服务器，可以用Wampserver（需要手动开启）也可以用AppServ（默认开启），安装完成后打开http://localhost/ 去看看服务器有没有装成功。

• 使用Cookie需要注意:
  （小 生存生命周期）
  1.放在服务器环境
  2.不安全
  3.大小4k
  4.cookie取出来的东西都是字符串
  5.生存生命周期 默认的就是浏览器关闭

• Cookie的基本用法
  1.存Cookie: document.cookie='212';
  2.取Cookie: alert(document.cookie);
  3.存Cookie有 name和 value 两个值
  document.cookie='name=value';
  4.expires:设置过期时间
  var oDate=new Date();
  oDate.setDate(oDate.getDate()+3); document.cookie='a=212;expires='+oDate;
  5.path: /(根目录) 默认存在当前目录
  document.cookie='b=212;path=/;expires='+oDate;
  6.domain: 存域名（放一级域名）
  document.cookie='a=212;domain=www.baidu.com;expires='+oDate;

• 设置Cookie

function setCookie(name,value,iDay){
   /*当时间参数存在的时候*/
   if(iDay){
      /*设置过期时间*/
      var oDate=new Date();
      oDate.setDate(oDate.getDate()+iDay); 
     document.cookie=name+'='+value+';path=/;expires='+oDate;
   }else{
      /*否者默认浏览器关闭过期*/ 
     document.cookie=name+'='+value+';path=/;';  
 }
};

• 获取Cookie

function getCookie(name){
   /*将获取到的字符串变成数组纯在arr中*/
   /*得到的数据格式是这样的a=11; b=12*/
   var arr=document.cookie.split('; ');
    for (var i=0;i<arr.length;i++) {
      /*再拆分一次*/
      var arr2=arr[i].split('=');
      //判断arr2[0]是否是要读取的Cookie
      if(arr2[0]==name){
         return arr2[1];
      }
   }
   return '';
}

• 删除Cookie

function removeCookie(name){
   /*当设置的时间小于0，就可以移除cookie*/
   setCookie(name,'任意值',-10);
}

封装好的在这里https://github.com/youfrweb/Cookie/blob/master/cookie.js

localStorage的使用

• localStorage也是用于本地处存储的，和Cookie有些区别：
  本地存储cookie localStorage 兼容性 IE7+
  如何查看 localStorage
  F12-application（resource）->localStorage 存储 localStorage.a =12; 注意存储进去的都是 字符串
• localStorage的存取
  有两种方法：
  1.常用写法

    localStorage.a='aaa';//存
    localStorage.a;//取

2.标准方法

存：（标准模式）
loaclStorage.setItem('abc','wel');
取：（标准模式）
loaclStorage.getItem('abc');
删：移除某项
localStorage.removeItem('abc');
全部清空（基本不用）
localStorage.clear();

***可以直接用loaclStorage.key = value，因为localStorage是一个对象
注意：以上是localStorage的基本用法，他的跨页面通信的用法在这：http://www.jianshu.com/p/22d9f1574688

Cookie和localStorage的区别

localStorage与cookie相似，可以替代cookie

                cookie                 localStorage
大小：         4k                          5M           之内安全    
兼容性：       ie6+                        ie7+    
是否走网络：    是                            否    
过期时间：    expires会话结束（session） 
一直存在，除非手动清除                
必须浏览器关闭            
 loaclStorage.removeItem('abc');     
  loaclStorage.clear();//一般不要用