localStorage的使用

这是一个HTML5提供的本地存储方案，它会在本地存储一个key,value的对象。

添加标识

如果需要使用localStorage存储数据的话，主要为每个值添加唯一的标识。不然很容易读取到其他程序存储的内容。

隐私模式下注意点

PC端,这两个API在低版本的IE下是没有,所以是需要用try..catch包裹的.

在移动端,我刚刚开始是不加的,所测试的手机也没问题.但是现在很多浏览器有无痕模式,这个模式下,localStorage相关的API时禁用的.所以使用时,还是要保证代码的健壮性， 添加一个polyfill.

  1. // 解决隐私模式下 localStorage 不正常问题
  2. ;(function() {
  3.   var KEY = '_localStorage_'
  4.     , VALUE = 'test';
  6.   // 检测是否正常
  7.   try {
  8.     localStorage.setItem(KEY, VALUE);
  9.   } catch(e) {
  10.     var noop = function() {};
  12.     localStorage.__proto__ = {
  13.       setItem: noop,
  14.       getItem: noop,
  15.       removeItem: noop,
  16.       clear: noop
  17.     };
  18.   }
  20.   // 删除测试数据
  21.   if(localStorage.getItem(KEY) === VALUE) localStorage.removeItem(KEY);
  22. })();

ios7下另一个问题

上面的这段代码，有一个严重的隐患，就是在原型的proto属性上添加东西，这一点不是所有浏览器都支持的，所以我在ios7下会得到报错。

解决方案：建议使用其他命名替代localstorage或者针对localstorage部分使用try,catch包装。

原文: https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/localStorage.html