HTML宝典(第 1 版)
5.2.1 概述
阅读(

HTML基础

HTML元素

表单及应用

Canvas绘图基础

客户端存储

Cookie

Web Storage

Web Storage 是一项非常重要,并且很实用的技术,已经被大多数浏览器(包括IE8)所支持,

在HTML4时代, 虽然cookie无处不在,但cookie仍然有自己的硬伤,如:

  • cookie的大小是受限制的,一个cookie只能设置4KB的数据。并且大多数浏览器只允许每个站点存储20个Cookie;
  • cookie保存的数据,无论服务器端是否需要,每次请求都会被发送到服务器端,白白耗费网络资源。并且,数据一般是非加密传输,存在安全隐患;
  • cookie缺少操作数据的API,需要开发者自己封装接口,使用起来极不方便。

为了解决cookie的不足,HTML5提出了Web Storage方案。那么,什么是Web Storage呢?简单的讲,Web Storage是网页存储的总称,它让Web页面能够把数据存储在客户端的计算机中。它具有以下优势:

  • 存储空间大,默认5M;
  • 数据存储在客户端,可以直接获取,不会发送到服务器,既节省网络资源,又安全可靠;
  • 这种机制是 web 浏览器原生提供的,所以不需要第三方插件的支持。
  • 提供了操作数据的API,开发人员只需调用接口即可操作数据,简单易用。

概述

Web Storage是网页存储的总称,由 localStorage 和 sessionStorage 组成:

localStorage是持久化的本地存储,除非主动对它进行增加、删除、修改操作,否则它不会发生变化。数据存储完成后,它们就一直保存在用户的计算机中,永不过期,哪怕关闭网页或浏览器后再打开,或电脑关机后再开机,这些数据依然存在。并且,任何窗口的任何页面都可以访问这些数据。

sessionStorage的特点是临时存储,用来保存一个会话(session)中的数据。只有同一个会话中的页面才能访问这些数据,当会话结束后,数据也随之自动销毁。也就是说,只要浏览器窗口(或标签)不关闭,数据就一直存在,一旦关闭窗口或浏览器,数据将被清除。

浏览器为Web Storage提供了相关的API,开发人员只需调用API即可操作数据,简单易用。这些API见表 5‑1:

表 5‑1 Web Storage API及功能描述
API 功能描述
setItem(key,value) 将 value 存储到 key 字段中
getItem(key) 获取指定 key 的本地存储值
removeItem (key) 删除指定 key 的本地存储值
key(key) 获取指定索引对应的 key,索引号从0
length() 获取对象中所存储的键-值对的数目
clear() 删除本地存储的全部数据

此外,Web Storage 还提供了一个 storage 事件,当存储区域的内容发生改变时,就会自动触发该事件,并把它发送给所有感兴趣的监听者。

由于 localStorage 和 sessionStorage 所提供的API和事件机制完全相同,它们之间的唯一不同,就是数据的生命期,一个是持久化存储,一个是临时存储,仅此而已。因此,下面就以 localStorage 为例,来介绍Web Storage的 API 和 storage 事件机制。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验