localStorage 使用总结

一、localStorage 与 sessionStorage

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

可以把 localStorage 看成是前端的小型数据库，而且是持久化的

sessionStorage 也是 HTML5 新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

二、localStorage 的优势与局限

2.1、 localStorage 的优势

localStorage 拓展了 cookie 的 4K 限制
localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

2.2、 localStorage 的局限

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

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

三、localStorage 的使用

localStorage 的使用也是遵循同源策略的，所以不同的网站是不能直接共用相同的 localStorage

3.1、浏览器支持

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

if(!window.localStorage){
   console.log("浏览器支持localstorage");
   return false;
}else{
  return true;
}

3.2、localStorage 数据读写

var storage = window.localStorage;
// 写
storage['a'] = 1;
storage.b = 1;
storage.setItem('c', 3);
// 读
console.log(storage['a']);
console.log(storage.b);
console.log(storage.getItem('c'));

这里有三种对 localStorage 的读取，其中官方推荐的是 getItem\setItem 这两种方法对其进行存取

3.3 localStorage 的删除

var storage = window.localStorage;
// 写
storage['a'] = 1;
storage.b = 1;
storage.setItem('c', 3);

storage.removeItem('a'); // 删除单个
storage.clear(); // 删除所有

felix-cao / Blog

localStorage 使用总结 #117