存储在客户端的方式

Web客户端的几种存储方式
1、Cookie
在H5之前，cookie是主要的存储方式。cookie可以兼容到包括ie6以上的所有浏览器。

Cookie数据会带到请求头的cookie字段里面，每次同主域名的请求中，都会传递数据，增加了网络请求的数据量，并且造成主域的污染。同时，cookie在不同浏览器上数量和大小都有限制

下面是各浏览器对cookie大小和个数的限制：

cookie的操作比较麻烦，需要自己写操作函数来实现操作，下面是cookie是实现cookie的操作函数

复制代码
var cookie = {
/**设置cookie
** name 标识
** value 值
** options {
** ‘path’: ‘访问路径’,
** ‘domain’ : ‘域名’,
** ‘expire’ : 过期时间
}
**/
setCookie : function(name,value,options){
var options = options ? options : {},
path = options.path ? options.path : ‘/’,
domain = options.domain ? options.domain : document.domain,
time = options.expire ? (new Date().getTime() + options.expire * 1000) : ‘’,
expire = new Date(time).toUTCString();
document.cookie = encodeURIComponent(name) + “=”+ encodeURIComponent(value) + “;expires=” + expire +
“;domain=” + domain + “;path=” + path;
},
//获取cookie
getCookie: function(name){
var arr,
reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
console.log(arr);
return unescape(arr[2]);
}
return null;

    },
    //移除cookie
    removeCookie: function(name){
      var val = this.getCookie(name);
      if(val != null){
        this.setCookie(name,val, {
          expire : - 1
        })
      }
    }
  }

复制代码
Cookie的生命周期是根据设置值得expire的时间来控制的。

适用范围

需要前后端进行传递的数据（比如用户的登录状态）

低版本的浏览器兼容

2、sessionStorage和localStorage
sessionStorage和localStorage是html5新引进的新特性。现在浏览器的支持情况：

localStorage是存储在用户本地的浏览器上，不像cookie一样携带在http请求头部的字段里面，这有效的节约了带宽。localStorge同样也采用了同源策略对存储的容量进行了限制，一般限制为同一域名5M，并且不同域名的数据不能相互访问。

存储的生命周期

localStorage的存储周期为永久，只要开发者不手动删除，会一直存在

sessionStorage的存储周期为当前会话，数据会在浏览器会话（browsing session）结束时被清除，即浏览器关闭时

操作方法

localstorage是以key-value的形式进行存储的，H5封装好了localstorage的操作方法

localstorage.length: 获取当前存储的键值对数量

localstorage.key(n):获取第n项的键值

localstorage.getItem(key):获取对应键值的数据

localstorage.setItem(key,value):设置对应的键值对

localstorage.remove(key):清除某个数据

localstorage.clear():清除存储的所有数据

需要注意的是：

localstorage存储的值只能是字符串的形式，当我们存储数据为引用对象的时候，会默认调用对象的toString方法，转化为字符串在存储。所以我们在存储数组时，存储的数据会将数据项以,隔开，解析的时候需要我们分解成为数组再操作。而对于对象，我们需要用JSON.stringify转化存储，获取数据后再用JSON.parse转化为对象

复制代码
var mylocalStorage = window.localStorage;

  mylocalStorage.clear();
  mylocalStorage.setItem('test-arry',[1,2,3,4])

  console.log('数组的值',mylocalStorage.getItem('test-arry'));

  //获取数组第一项
   console.log('数组的第一项值',mylocalStorage.getItem('test-arry').split(',')[0]);

  var data = {
    'a' : 1,
    'b' : 3
  }

  var dataStr = JSON.stringify(data);
  mylocalStorage.setItem('test-obj',data)
  console.log('直接存储对象',mylocalStorage.getItem('test-obj'));

  mylocalStorage.setItem('test-str',dataStr)
  console.log('转化后存储对象',mylocalStorage.getItem('test-str'));

  var data = JSON.parse(mylocalStorage.getItem('test-str'));
  console.log('重新解析对象',data);