本地存储localStorage的使用及剩余量计算

1. 本地存储的使用
2. 和cookie的区别
3. 检测某一个网页下localStorage的剩余容量

一、使用

// 存储
localStorage.setItem("name", "value");
// 取回
localStorage.getItem("name");
！本地存储必须是字符串类型的，如果是想要存对象/数组，需要先将对象/数组转换成字符串来存储
var ArrResults =['a','b','c']；/ var ArrResults = {'name':'amao' , 'hh':'gg'}；
//存
localStorage.setItem('result', JSON.stringify(ArrResults))
//取
var result = JSON.parse(localStorage.getItem('result'))

二、区别

localStorage - 存储没有截止日期的数据
sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）
localStorage - 仅在客户端存储不参与服务器通信，存储大小一般为5M，如果不是人为清除，那么即使是关闭浏览器也会一直存在。
sessionStorage - 仅在客户端存储不参与服务器通信，存储大小一般为5M，会话级存储，也就是说如果关闭当前页面或者浏览器那么就会清除
cookie - 客户端存储，参与服务器通信，存储大小为4k,可设置生命周期，在设置的生命周期内有效

三、检测剩余量

业界主流是 5 MB，但每个浏览器各自又有些不同，超过会报错。

//判断已使用本地存储大小
	if(!window.localStorage) {
        console.log('浏览器不支持localStorage');
    }
    var size = 0;
    for(item in window.localStorage) {
        if(window.localStorage.hasOwnProperty(item)) {
            size += window.localStorage.getItem(item).length;
        }
    }
    //'当前localStorage已使用容量为' + (size / 1024).toFixed(2) + 'KB'
    //如果大于当前容量的98% ，就删掉……的数据
    localStorageUsed = (size / 1024).toFixed(2);
    if((localStorageUsed / (1024 * 1024 * 5)) > 0.98){
    	……
    	_historyResult = _historyResult.filter(function (val) {
    	        return val.c != 1;
    	});
    	//操作完重新存储
    	localStorage.setItem("historyResults", JSON.stringify(_historyResult));
    }

但是如何获取localStorage最大容量，我还没搞明白，我上面的是按5M来计算的，网上找的很多代码都报错或者死循环，比如下面这段（引用的其他作者BuiltyMonkey的博客），只有chrome不崩溃，360和firefox都崩溃

https://www.cnblogs.com/MonkeyKingK/p/5499831.html

(function() {
   if(!window.localStorage) {
   console.log('当前浏览器不支持localStorage!')
   }    var test = '0123456789';
   var add = function(num) {
     num += num;
     if(num.length == 10240) {
       test = num;
       return;
     }
     add(num);
   }
   add(test);
   var sum = test;
   var show = setInterval(function(){
      sum += test;
      try {
       window.localStorage.removeItem('test');
       window.localStorage.setItem('test', sum);
       console.log(sum.length / 1024 + 'KB');
      } catch(e) {
       console.log(sum.length / 1024 + 'KB超出最大限制');
       clearInterval(show);
      }
   }, 0.1)
 })()