客户端数据存储 --- web storage From 《高程3》

wangbinke 发布于2019-08-21 14:37 / 3340人阅读

摘要：的目的就是取代进行大量的本地数据存储，其中不能进行跨会话存储，这可以使用弥补。删除由指定的名值对儿。使用方法存储数据使用属性存储数据使用方法读取数据使用属性读取数据一般来说，对存储空间大小的限制都是以每个源协议域和端口为单位的。

前言

本文首先介绍web storage和Cookie的对比，解释web storage的优势；随后指出怎样使用插firebug插件的扩展firestorage-plus查看web storage；然后介绍storage的方法和属性，sessionStorage和localStorage的方法和属性继承自storage；最后介绍sessionStorage和localStorage。

0 为什么引入web storage（对比Cookie）？

cookie不适合大量数据的存储（Cookie的大小是受限的），因为它们由每个对服务器的请求来传递（每次你请求一个新的页面的时候cooki都会被发送过去），这使得cookie 速度很慢而且效率也不高。web storage的目的就是取代Cookie进行大量的本地数据存储，其中sessionStorage不能进行跨会话存储，这可以使用localStorage弥补。

1 怎么使用firebug查看web storage？

一款针对firebug插件的扩展：firestorage-plus：
https://addons.mozilla.org/en...
一篇相关的介绍：
http://www.softwareishard.com...

firestorage-plus的简单测试：

essionStorage.setItem("name", "Nicholas");
console.log(sessionStorage.name);

在firebug的DOM菜单找到localStorage和sessionStorage选项，可以查看web storage，这样查看给出的信息有限。

也可以通过firestorage-plus进行查看：

选中某一个storage并右键，甚至可以对其进行编辑，可见这个插件确实比较简单好用。

2 storage的方法和属性

关于web storage，只需要了解两个对象：localStorage和sessionStorage，它们都是storage的实例，因此会继承storage的方法和属性，包括：

clear()： 删除所有值； Firefox 中没有实现 。
getItem(name)：根据指定的名字 name 获取对应的值。 
key(index)：获得 index 位置处的值的名字。
removeItem(name)：删除由 name 指定的名值对儿。
setItem(name, value)：为指定的 name 设置一个对应的值。
length 属性：判断有多少名值对儿存放在 Storage 对象中。

需要注意，web存储的数据类型都是字符串，如果需要其他类型，需要自行转换。

3 sessionStorage 对象

sessionStorage 对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。这个对象就像会话 cookie，也会在浏览器关闭后消失。存储在 sessionStorage 中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可用（Firefox 和 WebKit 都支持， IE 则不行）。存储在 sessionStorage 中的数据只能由最初给对象存储数据的页面访问到，所以对多页面应用有限制。
根据sessionStorage继承自storage的方法和属性，可以有如下操作：

//使用方法存储数据
sessionStorage.setItem("name", "Nicholas");
//使用属性存储数据
sessionStorage.book = "Professional JavaScript";

sessionStorage 中有数据时，可以使用 getItem()或者通过直接访问属性名来获取数据。

//使用方法读取数据
var name = sessionStorage.getItem("name");
//使用属性读取数据
var book = sessionStorage.book;

还可以通过结合 length 属性和 key()方法来迭代 sessionStorage 中的值，如下所示。

sessionStorage.setItem("name", "Nicholas");
sessionStorage.setItem("age", "20");
sessionStorage.setItem("height", "180cm");
for (var i = 0, len = sessionStorage.length; i < len; i++) {
  var key = sessionStorage.key(i);
  var value = sessionStorage.getItem(key);
  console.log(key + "=" + value);
}

还可以使用 for-in 循环来迭代 sessionStorage 中的值：

for (var key in sessionStorage){
var value = sessionStorage.getItem(key);
alert(key + "=" + value);
}

要从 sessionStorage 中删除数据，可以使用 delete 操作符删除对象属性，也可调用
removeItem()方法。

//设置四个值
sessionStorage.setItem("name", "Nicholas");
sessionStorage.setItem("age", "20");
sessionStorage.setItem("height", "180cm");
sessionStorage.setItem("book", "ring of the king");
//使用 delete 删除一个值——在 WebKit 中无效
delete sessionStorage.name;
//使用方法删除一个值
sessionStorage.removeItem("book");

在firebug中可以看到只剩两个值：

4 localStorage 对象

localStorage 中的数据保留到通过 JavaScript 删除或者是用户清除浏览器缓存。要访问同一个 localStorage 对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上，这类似于Ajax的同源策略。
由于 localStorage 是 Storage 的实例，所以可以像使用 sessionStorage 一样来使用它。下面是一些例子。

//使用方法存储数据
localStorage.setItem("name", "Nicholas");
//使用属性存储数据
localStorage.book = "Professional JavaScript";

//使用方法读取数据
var name = localStorage.getItem("name");
//使用属性读取数据
var book = localStorage.book;

一般来说，对存储空间大小的限制都是以每个源（协议、域和端口）为单位的。换句话说，每个源都有固定大小的空间用于保存自己的数据。考虑到这个限制，就要注意分析和控制每个源中有多少页面需要保存数据。
对于 localStorage 而言，大多数桌面浏览器会设置每个来源 5MB 的限制。 Chrome 和 Safari 对每个来源的限制是 2.5MB。而 iOS 版 Safari 和 Android 版 WebKit 的限制也是 2.5MB。
对 sessionStorage 的限制也是因浏览器而异。有的浏览器对 sessionStorage 的大小没有限制，但 Chrome、 Safari、 iOS 版 Safari 和 Android 版 WebKit 都有限制，也都是 2.5MB。 IE8+和 Opera 对sessionStorage 的限制是 5MB。

云服务器 GPU云服务器 python高程数据 js获取from表单数据 js+获取from表单数据 web数据存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87972.html

客户端数据存储 --- web storage From 《高程3》

摘要：的目的就是取代进行大量的本地数据存储，其中不能进行跨会话存储，这可以使用弥补。删除由指定的名值对儿。使用方法存储数据使用属性存储数据使用方法读取数据使用属性读取数据一般来说，对存储空间大小的限制都是以每个源协议域和端口为单位的。前言本文首先介绍web storage和Cookie的对比，解释web storage的优势；随后指出怎样使用插firebug插件的扩展firestorag...

wfc_666 2019-08-01 15:50 评论0 收藏0
客户端数据存储----Cookie From 《高程3》

摘要：首先先来一段总结用于本地数据存储，出现在服务器和浏览器交互的响应头部和请求头部中，受到单域名下的数量单个大小性能安全限制。子技术的出现缓解了单域名下的数量限制，关于子有一整套工具函数可以使用。前言本篇主要介绍Cookie技术的读书总结，但是我认为逻辑上最好会和Web Storage技术放在一起进行对比，因此后续会再总结一篇关于WEB存储的姊妹总结，敬请期待。首先先来一段总结：Co...

马忠志 2019-08-20 11:39 评论0 收藏0
客户端数据存储----Cookie From 《高程3》

摘要：首先先来一段总结用于本地数据存储，出现在服务器和浏览器交互的响应头部和请求头部中，受到单域名下的数量单个大小性能安全限制。子技术的出现缓解了单域名下的数量限制，关于子有一整套工具函数可以使用。前言本篇主要介绍Cookie技术的读书总结，但是我认为逻辑上最好会和Web Storage技术放在一起进行对比，因此后续会再总结一篇关于WEB存储的姊妹总结，敬请期待。首先先来一段总结：Co...

since1986 2019-08-01 15:50 评论0 收藏0
高程3总结#第23章离线应用与客户端存储

摘要：离线应用与客户端存储离线检测定义了属性来检测设备是在线还是离线。应用缓存还有很多相关的事件，表示其状态的改变。离线应用与客户端存储离线检测 HTML5定义了navigator.onLine属性来检测设备是在线还是离线。这个属性为true表示设备能上网，值为false表示设备离线。这个属性的关键是浏览器必须知道设备能否访问网络，从而返回正确的值不同浏览器之间有小差异 IE6+...

MobService 2019-08-23 12:15 评论0 收藏0