手记

老生常谈h5新特性:WebStorage

WebStorage
数据存储方案
Web项目中需要存储多种数据,大体上有两种存储方法:
(1)服务器端存储:
1)数据库技术:存储项目中的核心数据
2)Session技术:存储当前用户的信息
(2)客户端存储:不太紧要的与客户端有关的数据,如浏览记录、内容定制、样式定制
1)Cookie技术:使用比较繁琐、大小不能超过4KB
2)Flash技术:逐渐被淘汰
3)HTML5WebStorage技术:使用简单,大小不超过8MB
4)IndexedDB技术:客户端直接存储对象,目前还不是HTML标准技术

Web会话:指客户端浏览器从连接到某个Web服务器开始,一系列的请求-响应过程。直到客户端关闭浏览器,会话结束。

1.WebStorage

HTML5的WebStorage技术,提供了两个对象,用于在浏览器中存储客户端的访问数据:
window.sessionStorage——会话级存储:
在浏览器的内存中存储的与某个服务器间的一系列请求-响应过程中产生的数据——都是Key-Value对形式。当会话结束时(用户关闭了浏览器),会话级数据即消失。
sessionStorage['key'] = 'value'; //存储一个数据
var v = sessionStorage['key']; //读取一个数据
sessionStorage.length //获取数据的个数
sessionStorage.setItem('key', 'value') //存储一个数据
var v = sessionStorage.getItem('key') //读取一个数据
sessionStorage.removeItem('key') //删除一个数据
sessionStorage.clear() //清除所有的数据
window.localStorage——本地/跨会话级存储:
在客户端文件系统/硬盘中存储客户端与服务器间的访问数据——都是Key-Value对形式。即使关闭浏览器,甚至关闭计算机仍然存在,否则会永久存在。
localStorage['key'] = 'value'; //存储一个数据
var v = localStorage ['key']; //读取一个数据
localStorage.length //获取数据的个数
localStorage.setItem('key', 'value') //存储一个数据
var v = localStorage.getItem('key') //读取一个数据
localStorage.removeItem('key') //删除一个数据
localStorage.clear() //清除所有的数据

12人推荐
随时随地看视频
慕课网APP