怎样使用Web Storage存储

企鹅博客
19502
文章
0
评论
2020年2月25日14:57:14 评论 18 views 1930字阅读6分26秒

这次给大家带来怎样使用Web Storage存储,使用Web Storage存储的注意事项有哪些,下面就是实战案例,一起来看一下。

localStorage-------sessionStorage

Web Storage特点:

1、Key--Value型的简单存储形式

2、可以和其他普通的javascript对象相同的形式来进行读写操作

3、容量大-->5M(和cookie相比)--(cookie只有4KB、且发送请求时会一起带上,影响速度)

4、只能在同源的情况下才能被访问

以下用localStorage进行举例----》sessionStorage和localStorage基本相同,但是sessionStorage是基于会话的,随着窗口的关闭而消失。但是localStorage是存储在本地的数据,除了通过程序删除或者手动删除,数据是不会丢失的。

类似与普通的javascript对象,可以采用点(.)操作和[ ]中括号操作来访问属性。

如:localStorage.setItem(" foo","1") \ localStorage.foo="1" \ localStorage["foo"]="1"

常用的api:setItem()、getItem()、clear()。

在对象进行存储的时候,在读写的时候,需要将对象转成JSON字符串进行存储,引入2个函数JSON.stringify(obj)、JSON.parse(str)

如:var obj={x:1,y:2} 存储:localStorage.obj=JSON.stringify(obj)、读取:var obj2=localStorage.parse(localStorage.obj)。

数据的枚举:1、通过key方法和length属性遍历 2、for in 遍历

1:for (var i=0;i<localStorage.length;i++){var key=localStorage.key(i) , value=localStorage[key] ; console.log(key+":"+value);}

2:for (var key in localStorage){ if(localStorage.hasOwnProperty(key)){var value=localStorage[key] ; console.log(key+":"+value);} }

storage事件

在某个窗口更改了web Storage的数据之后,那么就在除了更改数据的窗口之外的所以窗口触发storage事件。

window.addEventListener('storage',function(event){ console.log(event.key) }.false);

下面列举几个常用的event事件对象的属性。

key(被更新的键名)、oldValue(更新前的值)、newValue(更新之后的值)、url(被更新的页面的url)

命名空间的管理----由于localStorage的数据不对自动消失,如果胡乱的添加过多的属性,就会导致后续的管理变得十分困难。我们可以通过命名空间来进行管理。

<span style="white-space:pre">	</span>var serviceName="SERVICENAME",storage=null;
	//通过load事件读取数据至本地变量
	window.onload=function(){
		try{
			storage=JSON.parse(localStorage[serviceName] || '{}');
		}catch{
			storage={};
		}
	}
	//通过onbeforeunload时间将数据写入localStorage
	window.onbeforeunload=function(){
		localStorage[serviceName]=JSON.stringify(storage)
	}

1、将localStorage的数据写到本地变量storage中,那么对其的访问速度会比访问localStroage的速度块。

2、不同页面或者不同模块分别以不同的serviceName命名,进而避免属性名冲突

3、由于一次页面只对localStorage读写了一次,所以在页面中无法触发storage事件。所以在必要时,我们必要时需要封装方法来对localStorage数据进行更新,或者同步其他标签页的数据。

相信看了本文案例你已经掌握了方法,更多精彩请关注H5教程其它相关文章!

推荐阅读:

如何使用源生css3实现圆环加载进度条

如何访问JS的对象属性与方法

以上就是怎样使用Web Storage存储的详细内容,更多请关注H5教程其它相关文章!

继续阅读
  • 版权声明: 发表于 2020年2月25日14:57:14
  • 转载注明:https://www.qieseo.com/352937.html
Web页面跳转并取值的方法指导 H5教程

Web页面跳转并取值的方法指导

这篇文章主要介绍了Web前端页面跳转并取到值,就是从A页面跳转到B页面,并将B页面的值取到赋到A页面上显示,具体实现方法,大家参考下本文 记录一下 (从A页面跳转到B页面,并将B页面的值取到赋到A页面...
PHP发布WebService的实例分享 php教程

PHP发布WebService的实例分享

Web service是一个平台独立的,低耦合的,自包含的、基于可编程的web的应用程序,本文主要和大家分享PHP发布WebService的实例,希望能帮助到大家。 //发布WebService &l...
Laravel访问网站页面空白 php教程

Laravel访问网站页面空白

配置好了Laravel之后进行网站访问,发现是空白页面,第一次使用Laravel很迷茫。使用fiddler查看的时候出现500错误,网上查了下是因为根目录下的storage目录没有777权限,如图: ...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: