Storage

Web存储端--Storage

LocalStorage和SessionStorage使用介绍,store.js工具库使用

2018-08-21侠课岛    初级拔高       

前端/前端/客户端存储 18     0     3459

在现在我们讨论 Web 端存储或者是前端存储的时候,其实大部分说的都是 LocalStorage/ SessionStorage(因为 LocalStorage 和 SessionStorage 在用法和存储时间外的特性上完全一样,后文全用 LocalStorage 来举例)。这是一项在 HTML5 中被加入的新特性,补充 Cookie 各方面的不足,并且学习曲线非常简单,只要会写 JavaScript 就一定会用 LocalStorage。

3.1 LocalStorage / SessionStorage 介绍

在正式介绍 LocalStorage 之前,我们先去 Can I use 上查看一下目前主流浏览器的支持程度。 注: Can I use 是一个前端兼容性自查的网站。当我们在开发过程中对于浏览器兼容性不确定的时候,不妨利用一下。

可以看到,几乎所有主流的浏览器都支持了 LocalStorage,IE 也从 8 开始就支持了。所以在使用上我们可以放心大胆地使用。

既然同为客户端存储,下面让我们来看一下 LocalStorage 有哪些优势。

  1. 存放大小:一般对于一个网站来说,LocalStorage 可以储存约 5MB 左右的数据,相较于 4KB 的 Cookie 来说,要打上许多。也基本可以满足我们日常网站的需求。
  2. 存储时间:LocalStorage 是永久储存在客户端上的,没有过期时间。而 SessionStorage 则是在浏览器关闭后销毁的,与不设置 max-age 的 Cookie一样。
  3. 操作简便:LocalStorage 采用 key-value 的形式进行存储,并且提供了可以操作的 API,很方便我们查看操作某个属性。

当然,任何技术也都有其局限性。对于 LocalStorage 来说,有以下几点:

  1. 在隐身模式下(或隐私模式下),无法对 LocalStorage 进行操作,值是不可读取的。
  2. key-value 存储中的 value 只能是字符串。因此在存入 String 类型外的数据时,需要经过转换。尤其是当存入数组或者 JSON 等复杂结构的数据时需要使用 JSON.stringify 方法,来保证数据的结构不会被破坏。
  3. LocalStorage 的所有操作都是同步的,也就意味着会造成阻塞。因此在数据量大或者处理复杂时,会造成页面卡顿。

3.2 LocalStorage / SessionStorage 使用方法

在本课程中介绍的所有客户端存储方法中,LocalStorage 的学习成本是最低的。在 MDN 上可以看到 LocalStorage 有以下常用的属性和方法。

常用属性

LocalStorage 的属性很简单,只有 length 一个。localStorage.length 返回 localStorage 中存储的数据条数。 注: 尽管有 length 属性,但 localStorage 不是 Array,没有 Array 的相应方法。

常用 API

常用的 API 也非常简单。只有 5 个,可以参考下表,详细的用法会在后面的小节中展开。

编号 名称 用法
1 LocalStorage.key() 接受一个数字,返回在 LocalStorage 中第几项内容。
2 LocalStorage.getItem() 接受 key,返回 key 所对应的 value注意:返回的 value 值是字符串类型
3 LocalStorage.setItem() 接受 keyvalue 两个参数,将 value 存储到 LocalStorage 中。当 key 已经存在时,新的值会覆盖旧的值。
4 LocalStorage.removeItem() getItem 方法相对。接受 key,移除 key 所对应的 value
5 LocalStorage.clear() 清除 LocalStorage 中所有存储的值。注:使用时请小心

3.2.1 LocalStorage / SessionStorage 的写入

从上面的 API 中我们可以看到,向 LocalStorage 中写入,我们需要用到 LocalStorage.setItem() 的方法即可。我们打开 Chrome,在控制台中就可以直接设置。

作为例子我们设置一个 hello-Hello World 的键值对。

localStorage.setItem('hello', 'Hello World')

输入之后,我们就可以在 Chrome 的 Application 面板中的 LocalStorage 中看到我们刚才设置的值了。注意:当 key 存在时,新的 value 会覆盖旧的 value

当然,我们直接通过 localStorage.key = value 的形式也可以进行赋值,但是这样做非常不规范,因此建议遵循 API 的使用规范,通过 setItem 来进行赋值。在这里,我们用上面的方式设置了 hello2 的值。

在 Application 面板中可以看到被正确设置进去。但强烈不建议这样使用。

在前面我们也介绍过,由于 LocalStorage 只能接受 String 作为值,因此在存储其他类型的数据时我们需要进行转换。这里我们可以看一下,当我们不转换时,会发生什么。我们通过 Chrome 的控制台分别存储一个数字、数组、对象类型的数据。

localStorage.setItem('imNumber', 233)
localStorage.setItem('imArray', [2,3,3])
localStorage.setItem('imObj', {a: 2, b: '3', c: 3})

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

18

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?