HTML5 Web Storage API

Web Storage API

Web Storage 是以键值对（key-value）的形式存储数据，要存储的数据需要一个名字作为键，然后就可以使用这个键来读取它的值。键是一个字符串。值可以是 JavaScript 支持的任何数据类型，包括字符串、布尔值、整数和浮点数。但是，它们都会被转换成字符串进行存储。

对任何数据的操作，无非就是增、删、查、改，下面介绍一下Web Storage操作数据的方法，包括存储、修改、读取、删除、遍历等。

1、存储数据

调用 localStorage.setItem(key, value) 方法来存储数据。该方法需要有一个键和一个值作为参数，key是键，value是值。如果这个键不存在，就会新增一个键值对；如果这个键已经存在，则会覆盖原先存储的值。如：

localStorage.setItem("user", "Bill Gates") ;

调用该方法的结果是将字符串 value 存储到键 key中，因此上述代码就会把值“Bill Gates”存储到键“user”中。

存储数据后，在Google Chrome浏览器中，通过F12打开开发者工具，在 Resources 中就可以查看网页所加载的资源，localStorage中为本地存储的数据。运行结果如图 5‑2 所示：

图5-2 setItem()方法存储数据

除了调用 localStorage.setItem(key, value) 方法存储数据外，也可以像普通对象一样，使用点（.）操作符，及方括号（[]）的方式来存储数据。如：

localStorage.user = "Bill Gates"; // 使用点操作符
localStorage["user"] = "Bill Gates"; // 使用方括号

上述两种方法的效果跟 localStorage.setItem("user", "Bill Gates") 等效。不过，需要注意的是，如果使用点操作符，是直接使用键，不需要把键放在引号中，否则会存储失败。点操作符及方括号的方式，也适用于修改、读取、删除数据的情况。

2、修改数据

如果要修改某个键对应的值，只需再次调用 localStorage.setItem(key, value) 方法，并指定 key 和新的 value，就可以覆盖原先存储的值。如，以下代码用来修改键 "user" 的值：

localStorage.setItem("user", "maifang51");

此时刷新页面，就可以看到键 "user" 的值变成了 "maifang51"。运行结果如图 5‑3 所示：

图5-3 setItem()方法修改数据

3、读取数据

调用 getItem(key) 方法来读取本地存储的值。该方法需要有一个键作为参数。该方法返回指定的键在本地存储的值，如果该键不存在，则直接返回 null，不会引发异常。如：

alert(localStorage.getItem("user"));

上述代码在警告框中显示键“user”的值，得到先前存储的“maifang51”。运行结果如图 5‑4 所示：

图5-4 getItem()方法获取数据

4、删除数据

调用 removeItem(key) 方法来删除本地存储的值。该方法需要有一个键作为参数，并删除该键对应的值。

调用该方法，如果指定的键存在，则执行删除操作；如果键不存在，则不执行任何操作，也不会引发异常。如：

localStorage.removeItem("user");

上述代码将删除键 "user" 所存储的值，即删除 "user": "maifang51 " 键值对。删除后的结果如图 5‑5 所示：

图5-5 removeItem()方法删除数据

不过，removeItem(key) 方法只能删除单条数据。如果要删除多条数据，还需要遍历数据，逐个调用该方法进行删除。当然，如果要删除全部数据，遍历的方式就相对麻烦。这时，可以调用 localStorage.clear() 方法，一次性删除存储的所有数据。clear() 方法没有参数。

5、遍历数据

遍历数据，需用到 localStorage 对象的 length 属性和 key() 方法。通过 length 属性得到 localStorage 对象中存储的键-值对的数目，通过 key(index) 方法可以按索引获得键的名字，再根据键获取对应的值。如：

localStorage.setItem("user", "maifang51");
localStorage.setItem("site", "waibo.wang");
localStorage.setItem("email", "contact@waibo.wang");
var len = localStorage.length;
for (var i=0; i < len; i++) {
var key = localStorage.key(i);
var value = localStorage.getItem(key);
console.log(key + " = " + value);
}

上述代码先存储了 3 个键-值对，再遍历数据，将这些键-值对输出到控制台。运行结果如图 5‑6 所示：

图5-6 getItem()方法遍历数据

说明：存储JSON类型数据

Web Storage既支持字符串格式的数据，也支持JSON格式数据。存储JSON格式数据，其实就是把JSON对象转换成字符串，然后把该字符串存储到Web Storage对象中。

调用JSON的stringify(obj)方法，可以把JSON对象obj转换为字符串。如：

var data = {'name': 'Bill Gates', 'age': 54};
localStorage.setItem("user", JSON.stringify(data));

如果存储的是JSON格式数据，在获取数据时，还需要调用JSON对象的parse(str)方法，将Web Storage对象中存储的字符串转换为JSON对象。如：

var str = localStorage.getItem("user");
var data = JSON.parse(str);

此时，得到的data就是一个JSON对象 {'name': ' Bill Gates ', 'age': 54}。

关于作者

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

HTML5 Web Storage API相关推荐

使用 jQuery Mobile 与 HTML5 开发 Web App (十六) —— HTML5 Web Storage
绝大多数的软件都需要使用某种具有持久性的方式来存储数据,Web Apps 也不例外,涉及到完整后台的 Web Apps ,可以直接在后台使用 mysql 等数据库来存储数据,但过多的 sql 查询会影 ...
Web Storage API的介绍和使用
文章目录简介浏览器的本地存储技术 Web Storage相关接口浏览器兼容性隐身模式使用Web Storage API 总结简介 Web Storage为浏览器提供了方便的key valu ...
HTML5 Web Storage事件
Storage事件在某些复杂情况下,如果多个页面都需要访问本地存储的数据,就需要在存储区域的内容发生改变时,能够通知相关的页面. Web Storage API内建了一套事件通知机制,当存储区域的内 ...
利用HTML5 Web Audio API给网页JS交互增加声音
转自张鑫旭老师博客原文地址一.庞然的HTML5 Web Audio API 首先务必要弄清这一点,本文这里所说的HTML5 Web Audio API和HTML5 元素完全不是一个东西,其体量也完 ...
html5 web storage攻击,HTML5安全风险详析之二：Web Storage攻击
**一.WebStorage简介** HTML5支持WebStorage,开发者可以为应用创建本地存储,存储一些有用的信息.例如LocalStorage可以长期存储,而且存放空间很大,一般是5M,极大 ...
HTML5 Web Storage用法
早期的网页数据存储只能依赖于cookies,但它存在着容量有限且很小,不便于复杂数据的管理等问题,此外,还需将cookies附带在每一次网络请求之中.HTML5的出现,极大地增加了开发人员的开发灵活度 ...
HTML5 Web Audio Api－2 发声oscillator
(Web Audio Api基础信息整理中,到时候补上) oscillator的意思是振荡器,众所周知,声音就是物体振动产生的声波. 在Web Audio Api中,官方给我们提供了一个振荡器需要用 ...
html5 audio api 录音,如何使用HTML5 Web Audio API录制我的声音
在webkit浏览器上,您可以将 get user media api与webkitGetUserMedia一起使用 – 如 html5rocks所示. 如果你想用你的声音来创建javascript事 ...
HTML5 基础知识，第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值，Canvas 提供的创造性，以及Web storage的离线应用
HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User ...

HTML5 Web Storage API

Web Storage API

HTML5 Web Storage API相关推荐

最新文章

热门文章