返回介绍

localStorage的使用

发布于 2024-06-02 22:07:04 字数 2994 浏览 0 评论 0 收藏 0

这是一个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包装。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文