前端工程师手册

localStorage的使用

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

添加标识

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

隐私模式下注意点

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

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

// 解决隐私模式下 localStorage 不正常问题
;(function() {
  var KEY = '_localStorage_'
    , VALUE = 'test';

  // 检测是否正常
  try {
    localStorage.setItem(KEY, VALUE);
  } catch(e) {
    var noop = function() {};

    localStorage.__proto__ = {
      setItem: noop,
      getItem: noop,
      removeItem: noop,
      clear: noop
    };
  }

  // 删除测试数据
  if(localStorage.getItem(KEY) === VALUE) localStorage.removeItem(KEY);
})();

ios7下另一个问题

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

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