HTML5网络存储(HTML5本地存储技术)

WebStorage是HTML5中本地存储的解决方案之一。在HTML5引入WebStorage概念之前，通过看名字不靠谱的IE用户数据、Flash cookie、Google Gears等解决方案都被去掉了。浏览器兼容的本地存储解决方案仅使用cookies。一些学生可能会问，既然cookie存储在本地，为什么要引入网络存储的概念？饼干肿了。饼干的缺陷非常明显。1.数据大小：作为存储容器，cookies的大小限制在4KB左右，非常棘手。尤其是对于如今复杂的业务逻辑需求，4KB的容量除了存储一些配置字段外，就是简单的单值信息，所以大部分开发者真的不知道期待什么。2.安全问题：因为HTTP请求中的cookie是明文传输的(HTTPS不是)，所以安全问题还是很大的。3.网络负担：我们知道cookie会附在每一个HttpRequest上，它们会在HTTP request和HttpResponse的头部传输，所以无形中增加了一些不必要的流量损失。WebStorageWebStorage是HTML新的本地存储解决方案之一，但它并不是为取代cookies而制定的标准。Cookies作为HTTP协议的一部分，对于处理客户端和服务器之间的通信是不可或缺的，会话依赖于客户端状态维护的实现。WebStorage的目的是解决不应该使用cookie，而应该使用cookie的本地存储问题。网络存储提供了两种类型的应用编程接口：本地存储和会话存储。从他们的名字可以大致了解他们之间的区别。本地存储将数据永久存储在本地，除非明确删除或清空，否则存储在会话存储中的数据仅在会话期间有效，并且将在浏览器关闭时自动删除。这两个对象都有一个公共的应用编程接口。复制代码如下：接口存储{readonly属性无符号长长度；DOMString？key(无符号长索引)；getter DOM string getItem(DOM string键)；setter creator void setItem(DOMString键，DOM string值)；deleter void remove item(DomString键)；void clear()；};1.length:唯一属性，只读，用于获取存储中键值对的数量。2.key:根据索引3获取存储的键名。getItem:根据key获取存储中对应的值4。setItem:向存储5添加键值对。removeItem:根据键名，删除键值对6。clear: Clear storage对象如何使用WebStorage在实现WebStorage的浏览器中，页面有两个全局对象，localStorage和Session Storage 。

以localStorage为例，看一个简单的操作码，复制代码如下：var ls=localStorageconsole . log(ls . length)；//0 ls.setItem('name '，' Byron ')；ls.setItem('age '，' 24 ')；console . log(ls . length)；//2 //遍历local storage for(var I=0；ils.lengthI){/* age : 24 name : Byron */var key=ls . key(I)；console.log(键“:”ls . GetItem(键))；} ls . remove item(' age ')；for(var I=0；ils.lengthI){/* name : Byron */var key=ls . key(I)；console.log(键“:”ls . GetItem(键))；} ls . clear()；//0 console . log(ls . length)；同时，事件HTML5指定了一个存储事件，在WebStorage发生变化时触发，可以用来监控不同页面对存储的修改。复制代码如下：接口存储事件：事件{readonly属性domstring key只读属性DOMString？oldValue只读属性DOMString？newValue只读属性DOMString url只读属性存储？storageArea};1.键值对2的key:键。旧值：修改前的值3。newValue:修改后的值4。url:触发修改的页面的URL 5。StorageArea:更改后的存储将index.php中的复制代码定义如下： a href=' test . PHP ' target=' _ blank ' test/a复制代码如下： window . addeventlistener(' storage ')，function(e){ console.log(e.key '由' e.url '从' e.oldValue '更改为' e . new value ')；console . log(e . storage area==local storage)；}，false)；localStorage.setItem('userName '，' Byron ')；test.php的复制代码如下： local storage . setitem(' username '，'收银员')；点击index.php页面的链接访问test.phptrue，可以看到index.php日志的控制台输出：用户名被http://localhost从Byron改成了Casper为什么test.phptrue比cookie好？1.容量方面，WebStorage的通用浏览器提供了5M的存储空间，不足以存储视频和图片，但对于大多数操作来说已经足够了。2.安全性方面，WebStorage不是HTTP头发送的浏览器，所以相对安全。3.在流量方面，由于WebStorage不传输到服务器，可以节省不必要的流量，对于移动设备的高频访问或者网页非常好。这并不意味着WebStorage可以取代cookie，但是cookie只能在WebStorage之后做它们应该做的事情。——用作客户机和服务器之间交互的通道，并保持客户机状态。因此，仅作为本地存储解决方案，网络存储优于cookie。注意：1。浏览器兼容性，这是几乎所有HTML5新特性中最容易实现的，因为IE8是浏览器支持的，IE7和IE6都可以使用IE用户数据。

2.由于localStorage和sessionStorage都是对象，我可以通过获取和修改键值对”。关键“或”[关键]“每年我饿的时候，但这是不建议的。复制代码如下： localstorage . username=' frank '；console . log(local storage[' userName '])；3.虽然localStorage存储在本地，但是不同的浏览器独立存储和存储数据，所以存储在Chrome上的localStorage在FireFox上无法获取。4.localStorage和sessionStorage只能存储字符串类型。对于复杂的对象，可以使用ECMAScript提供的字符串和JSON对象的解析。对于IE的低版本，可以使用js 2 . js5除了控制台，Chrome还提供了非常直观的本地存储显示方式，非常方便调试。