localStorage 与 sessionStorage 应用总结

一、什么是 localStorage、sessionStorage

在HTML5中，新加入了localStorage特性，这个特性主要是用作本地存储，解决了cookie存储空间不足的问题(cookie中每条cookie存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

由于localStorage不会因为关闭浏览器重启电脑消失，所以是存放在硬盘里面而不是内存。
sessionStorage存储在内存里。

localStorage的本质：现在主流浏览器上都是以SQLite数据库来存储 localStorage 中的K/V数据的（最终存储在本机硬盘上）。SQLite是一款十分轻巧的关系型数据库，它能跨平台，另外占用系统资源也非常低。

二、localStorage 的优势与局限

localStorage优势

• localStorage拓展了cookie的4K限制；
• localStorage可以将第一次请求的数据直接存储到本地硬盘，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。
• localStorage相对于seessionStorage的好处就是永远不会过期，除非主动删除。sessionStorage的生命周期是临时的，当关闭当前窗口或标签页，数据就会被清空；
• localStorage可以跨页面使用，因此可以实现跨窗口传递数据。sessionStorage只能在当前窗口使用，将数据保存在session对象中，所谓session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage局限

• 针对不同浏览器，localstorage大小不统一，并且在IE8以上的IE版本才支持localStorage属性；
• 目前所有的浏览器都会把localStorage的值类型限定为string类型，对于比较常见的JSON对象类型需要一些转换；
• localStorage在浏览器隐私模式下面是不可读取的；
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；
• localStorage不能被爬虫抓取到；

localStorage与sessionStorage的唯一一点区别就是localStorage为永久性存储，而sessionStorage当会话结束的时候，sessionStorage中的键值对会被清空。

三、localStorage 应用

localStorage在浏览器中的支持情况如下：

这里要特别声明一下，如果是使用IE浏览器的话，那么就要UserData来作为存储，这里主要讲解的是localStorage内容，所以userData不做过多的解释，因为目前的IE6/IE7属于淘汰的位置上，而且在如今的很多页面开发都会涉及到HTML5\CSS3等新兴技术，所以在使用上面一般我们不会去对其进行兼容。

首先，在使用localStorage的时候，需要判断浏览器是否支持localStorage属性。

if(！window.localStorage){
     alert("浏览器不支持localstorage");
     return false;
 }else{
     //主逻辑业务
 }

localStorage写入，localStorage写入有三种方法，下面一一介绍下：

if (！window.localStorage) {
   alert("浏览器不支持localstorage");
   return false;
 } else {
   var storage = window.localStorage;
   //写入a字段
   storage["a"]=1;
   //写入b字段
   storage.b=2;
   //写入c字段
   storage.setItem("c",3);
   console.log(typeof storage["a"]);
   console.log(typeof storage["b"]);
   console.log(typeof storage["c"]);
 }

运行后结果如下：

这里要特别说明一下localStorage的使用也是遵循同源策略的，所以不同网站不能共用相同的localStorage。

最后在控制台上面打印出来的结果是:

上面已经提到，localStorage只支持string类型的存储，代码中存储进去的是int类型，但打印出来却是string类型，这个与localStorage本身特点有关。

localStorage读取

if (!window.localStorage) {
     alert("浏览器不支持localstorage");
 } else {
     var storage = window.localStorage;
     //写入a字段
     storage["a"] = 1;
     //写入b字段
     storage.b = 2;
     //写入c字段
     storage.setItem("c",3);
     console.log(typeof storage["a"]);
     console.log(typeof storage["b"]);
     console.log(typeof storage["c"]);
     //第一种方法读取
     var a = storage.a;
     console.log(a);
     //第二种方法读取
     var b = storage["b"];
     console.log(b);
     //第三种方法读取
     var c = storage.getItem("c");
     console.log(c);
 }

上面演示了对localStorage的三种存储/读取方式，官方推荐getItem\setItem这方法对其进行存取。

前面说过localStorage相当于前端数据库，数据库主要是CRUD，这里的读取和写入就相当于增、查两个步骤。

接下来谈下localStorage的删、改操作：

改这个步骤比较好理解，思路跟重新更改全局变量一样：

if (!window.localStorage) {
    alert("浏览器不支持localstorage");
} else {
    var storage = window.localStorage;
    //写入a字段
    storage["a"] = 1;
    //写入b字段
    storage.b = 1;
    //写入c字段
    storage.setItem("c",3);
    console.log(storage.a);
    // console.log(typeof storage["a"]);
    // console.log(typeof storage["b"]);
    // console.log(typeof storage["c"]);
    /*分割线*/
    storage.a = 4;
    console.log(storage.a);
}

在控制台可看到a键已经被更改为4。

localStorage的删除

1、将localStorage所有内容清除

var storage = window.localStorage;
storage.a = 1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);

2、 将localStorage中某个键值对删除

var storage = window.localStorage;
storage.a = 1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);

控制台查看结果

localStorage键值获取

var storage = window.localStorage;
storage.a = 1;
storage.setItem("c",3);
for(var i = 0; i < storage.length; i++){
    var key = storage.key(i);
    console.log(key);
}

使用key()方法，向其中输入索引即可获取对应的键值。

四、localStorage 注意事项

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式。

这个时候可以使用JSON.stringify()，将JSON对象转换成为JSON字符串。

示例：

if (!window.localStorage) {
    alert("浏览器不支持localstorage");
} else {
    var storage = window.localStorage;
    var data = {
        name:'SHQ5785',
        sex:'man',
        hobby:'program'
    };
    var d = JSON.stringify(data);
    storage.setItem("data",d);
    console.log(storage.data);
}

读取之后，使用JSON.parse()方法将JSON字符串转换成为JSON对象:

var storage = window.localStorage;
var data = {
    name:'SHQ5785',
    sex:'man',
    hobby:'program'
};
var d = JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json = storage.getItem('data');
var jsonObj = JSON.parse(json);
console.log(typeof jsonObj);

打印出来是Object对象。

需要注意的是，JS数组本质上也是对象类型，所以上面的代码对数组也是适用的。

var arra = [1,2,3,4];
localStorage.setItem('key',JSON.stringify(arra));
var read=JSON.parse(localStorage.getItem('key'));
console.log(read,read.length);

溢出处理

try {
  localStorage.setItem(key,value);
} catch(oException) {
  if (oException.name == 'QuotaExceededError') {
    console.log('已经超出本地存储限定大小！');
     // 可进行超出限定大小之后的操作，如下面可以先清除记录，再次保存
    localStorage.clear();
    localStorage.setItem(key,value);
  }
}

五、拓展阅读

• 《网站开发进阶(三十)HTML5–本地存储Web Storage》