HTML5 本地存储 Web Storage

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用户指南》,并全部在 GitHub 上开源。

版权声明:本文出自 歪脖网 的《HTML宝典》,欢迎在线阅读,并提出宝贵意见。

猜你喜欢

转载自blog.csdn.net/ixygj197875/article/details/80100874