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
![特性检测
也可以使用 Modernizr 库进行检测
安博中程在线
1
2
3
function?supports_html5_webstorage()?{
????return?('localStorage'?in?window)?&&?window['localStorage']?!=?null?
}???????
1
2
3
4
5
if?(Modernizr.localStorage)?{
????//?window.localStorage?可用！
}?else?{
????//?没有本地HTML5存储支持
}???????
11/51](https://image.slidesharecdn.com/webstorage-130529205822-phpapp01/85/Webstorage-11-320.jpg)
![存储数据
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](https://image.slidesharecdn.com/webstorage-130529205822-phpapp01/85/Webstorage-12-320.jpg)
![检测某个键值是否为空
有可能某个 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](https://image.slidesharecdn.com/webstorage-130529205822-phpapp01/85/Webstorage-13-320.jpg)
![使用 sessionStorage
sessionStorage 的使用也非常简单，只是要使用 sessionStorage对象：
安博中程在线
1
2
3
4
5
//?取得?Email?地址
var?email?=?document.getElementById('emailAddress')?
?
//?保存?Email?地址
sessionStorage['email_address']?=?email?
14/51](https://image.slidesharecdn.com/webstorage-130529205822-phpapp01/85/Webstorage-14-320.jpg)
![另外两种写法
除了像这样写：
还可以这样：
或这样：
建议按第一种写就好了。
安博中程在线
1 localStorage['user_name']?=?userName.value?
1 localStorage.user_name?=?userName.value?
1 localStorage.setItem('user_name',?userName.value)?
17/51](https://image.slidesharecdn.com/webstorage-130529205822-phpapp01/85/Webstorage-17-320.jpg)
![查找所有数据项
要检索一个数据项，只要知道键名就可以了。不知道任何键名的话，可以使用 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](https://image.slidesharecdn.com/webstorage-130529205822-phpapp01/85/Webstorage-20-320.jpg)
![保存数值
通过 localStorage和 sessionStorage保存数据时，该数据会自动转换为文本。
对于数值就可能有问题：
正确的写法是：
安博中程在线
1
2
3
4
5
localStorage['age']?=?20?
age?=?localStorage['age']?
age?+=?10?
//?结果是?2010，因为取出来的也是文本，相加的时候只要有一个文本，js?就会把它作为文本相加
alert(age)?
1
2
3
age?=?Number(localStorage['age'])?
age?+=?10?
//?这样就可以正确的计算出结果是?30
21/51](https://image.slidesharecdn.com/webstorage-130529205822-phpapp01/85/Webstorage-21-320.jpg)
![保存对象
数值类型可以使用 Number()函数转换，文本和日期可以自动转换，或者设定好标准
格式进行转换。
对象也会被转换成字符串存储，这时候需要用到 JSON。否则的话就会存成字符串
object 了。
安博中程在线
1
2
3
4
5
6
7
8
9
10
11
12
var?person?=?{
????name:?'tom',
????age:?30,
????job:?'Software?Engineer'
}?
?
sessionStorage['person']?=?JSON.stringify(person)?
?
this_person?=?JSON.parse(sessionStorage['person'])?
alert(this_person.name)?
alert(this_person.age)?
alert(this_person.job)?
22/51](https://image.slidesharecdn.com/webstorage-130529205822-phpapp01/85/Webstorage-22-320.jpg)
