More Related Content
Similar to Webstorage (20)
Webstorage
- 4. 什么是 Web Storage ?
Web 应用的数据可以保存在两个地方，一个是 Web 服务器，一个是 Web 客户端（用
户的计算机，浏览器的一个目录）。这两个地方都有各自适合保存的数据：
HTML5 之前我们想要在用户本地保存信息，基本上只能使用 cookie（主要是在浏览
器和服务器之间保存身份信息）。cookie保存少量数据很方便，但是它也有一些不
好的地方。
安博中程在线
敏感信息，以及不希望别人篡改的数据，需要在服务端处理的数据等，需要一直保
存在 Web 服务器 - 安全，高效，可靠
一些不太重要的信息 - 用户偏好，应用状态；需要在 session内（不同页面间）共
享的数据；离线状态下需要保存的用户数据，需要放在用户本地
·
·
4/51
- 7. Web Storage 介绍和基本概念
安博中程在线
HTML5 的 Web Storage 可以让 Web 页面在客户端浏览器中以键值对的形式在本
地存储数据。
这些数据可以是临时的（浏览器一关就自动删除），或者是长期存在的（无论多少
天之后打开网站，仍然可以访问这些数据）。
Web Storage 的意思是供 Web 使用的 Storage，不是存储在 Web 上的，都是存储
在本地的。所以某些浏览器厂商又把它叫做“本地存储”或者“DOM存储”。
Web Storage 和很多其他的规范一样，原先是 HTML5 规范的一部分，后来被 W3C
归类划分给抽离出来形成了单独的一份标准。
·
·
·
·
7/51
- 8. 两种 Web Storage
Web Storage 又分为两种，分别对应两个 JavaScript 对象：
从代码的角度来看，localStorage和 sesseionStorage的使用完全相同，不同的
是数据寿命。从名字上我们就可以看出，sessionStorage主要用于保存哪些要从一
个页面传递到下一个页面的数据；localStorage主要用于保存希望用户未来还能看
到和用到的数据，比如用户偏好。
安博中程在线
本地存储，对应的是 localStorage对象。用于长期保存的数据，浏览器关闭几天
以后再打开数据还在。
会话存储，对应的是 sessionStorage对象。用于临时保存针对一个窗口（或标
签页）的数据。在访客关闭窗口或是标签页之前，这些数据是存在的；关闭之后，
浏览器就会删除这些数据。只要不关闭，哪怕跳转到别的网站再跳回来，数据还是
存在的。
·
·
8/51
- 9. Web Storage 的数据访问
localStorage和 sessionStorage都是和用户所在的域联系在一起的。也就是只
有同一个域的页面才可以访问共同的数据。
另外同样因为数据是保存在同一台计算机的同一个浏览器中，因此只有从同一台计算
机的同一个浏览器才能够访问到同样的本地数据。
localStorage的大小：大概是 5 MB。需要更大的空间可以考虑 IndexedDB,起步 50
MB，如果用户同意还可以更大。
安博中程在线 9/51
- 12. 存储数据
Web Storage 是基于 key/value 形式的，存储和检索数据都通过指定的 key。基本语
法如下：
比如我们想保存用户名，那么 key 就可以叫做 user_name:
读取用户数据和保存用户数据一样简单：
安博中程在线
1 localStorage[keyname] = data;
1
2
3
4
5
// 取得文本框
var userName = document.querySelector('#userName');
// 保存文本框中的用户名
localStorage['user_name'] = nameInput.value;
1 alert("你保存的是：" + localStorage['user_name']);
12/51
- 13. 检测某个键值是否为空
有可能某个 key 下面并没有保存数据。要检测某个 key 的值是否为空，可以直接检测
它是否等于 null：
安博中程在线
1
2
3
4
5
6
var userName = document.querySelector('#userName');
if (localStorage['user_name'] == null) {
userName.value = "没有找到哦";
} else {
userName.value = localStorage['user_name'];
}
13/51
- 15. Web Storage 测试注意的问题
安博中程在线
测试 Web Storage 时，很多浏览器中只有从 Web 服务器上打开的页面才能够读写
Web Storage，无论服务器是本地还是远程的。关键是不能从本地硬盘直接打开文
件测试。
问题就在于前面提到的，Web Storage 存储空间是和域绑定在一起的，需要据此进
行限制。
从本地硬盘直接打开 Web Storage 页面的会发生什么情况要视浏览器而定。有可
能完全不支持 Web Storage 了，localStorage 和 sessionStorage 都不见了(IE)；
也有可能可以使用，但是所有操作都会失败（Firefox）；还有可能是大部分功能都
支持，但是有些功能（比如 onStorage事件）失效。
所以我们最好都架一个服务器来进行这些功能的测试，类似情况还发生在 File
API身上。
·
·
·
·
15/51
- 16. 使用 Developer Tools 调试 Web Storage
可以使用 Chrome 的 Developer Tools -> Resource -> Local Storage /
Session Storage查看目前浏览器存储的内容，也可以通过 Developer Tools 删除
指定的 key/value 对（甚至可以直接添加)：simplestorage.html
安博中程在线 16/51
- 20. 查找所有数据项
要检索一个数据项，只要知道键名就可以了。不知道任何键名的话，可以使用 key()
方法从 localStorage或 sessionStorage中取得当前网站保存的所有数据
项。key.html
安博中程在线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function findAllItems() {
// 取得用于显示数据项的 <ul> 元素
var itemList = document.querySelector('#itemList');
// 清空列表
itemList.innerHTML = '';
// 遍历所有数据项
if (localStorage) {
for (var i=0; i<localStorage.length; i++) {
// 取得当前位置数据项的 key
var key = localStorage.key(i);
// 取得该键保存的数据值
var item = localStorage[key];
// 用以上数据项创建一个列表项，并添加到页面中
var newItem = document.createElement('li');
newItem.innerHTML = key + ': ' + item;
itemList.appendChild(newItem);
}
}
}
20/51
- 23. 响应存储变化 - storage 事件
通过捕获 storage事件可以跟踪存储区的改动，也就是说任何时候调用 setItem(), removeItem()或者
clear()方法时，如果真的发生了数据改动，都会在 window对象上触发storage事件。
这样我们就可以在同一个页面，或者同一站点的不同页面知道存储发生了变化。还记得前面的遍历所有数据项的
key.html 吗？我们把它稍微改造一下，让 storage事件来自动触发 findAllItems()方法。这样存储有变化时
页面就会自动更新。onstorage.html
安博中程在线
1
2
3
4
5
if (window.addEventListener) {
window.addEventListener('storage', findAllItems, false);
} else {
window.attachEvent('onstorage', findAllItems);
}
23/51
