特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
Web存储机制,在这里主要聊有关于Web Storage API提供的存储机制,通过该机制,浏览器可以安全地存储键值对,比使用cookie更加直观。接下来简单的了解如何使用这方面的技术。
基本概念
Web Storage 包含两种机制:
sessionStorage
为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)localStorage
同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在
这两种机制是通过Window.sessionStorage
和Window.localStorage
属性使用。更确切的说,在支持的浏览器中Window
对象实现了WindowLocalStorage
和WindowSessionStorage
对象并挂在其localStorage
和sessionStorage
属性下。调用其中任一对象会创建Storage
对象,通过Storage
对象,可以设置、获取和移除数据项。对于每个源sessionStorage
和localStorage
使用不同的Storage
对象。
例如,在文档中调用localStorage
将会返回一个Storage
对象,调用sessionStorage
返回一个不同的Storage
对象。可以使用相同的方式操作这些对象,但是操作是独立的。
在了解如何使用localStorage
和sessionStorage
之前,先来一下Storage
对象。
Storage对象
Storage
对象作为Web Storage API的接口,Storage
提供了访问特定域名下的会话存储或本地存储的功能。例如,可以添加、修改或删除存储的数据项。
如果想操作一个域名的会话存储,可以使用Window.sessionStorage
;如果想要操作一个域名的本地存储,可以使用Window.localStorage
。
Storage对象的属性和方法
Storage
对象提供自己的属性和方法:
Storage.length
:返回一个整数,表示存储在Storage
对象中的数据项数量。这个是Storage
对象的一个属性,而且是一个只读属性。Storage.key()
:该方法接受一个数值n
作为参数,并返回存储中的第n
个键名Storage.getItem()
:该方法接受一个键名作为参数,返回键名对应的值Storage.setItem()
:该方法接受一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值Storage.removeItem()
:该方法接受一个键名作为参数,并把该键名从存储中删除Storage.clear()
:调用该方法会清空存储中的所有键名
简单的示例
写一个简单的示例,页面就三个按钮:Set
、Get
和Remove
。按钮点击时,分别绑定三个函数:setStorage()
、getStorage()
和removeStorage()
:
setStorage()
:做了localStorage
和sessionStorage
存储,同时存的键名为name
,键值为W3cplus.com
getStorage()
:取得存储的name
,并打印出来removeStorage()
:移除setStorage()
函数中存储的name
如需转载,烦请注明出处:https://www.w3cplus.com/javascript/web-storage.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!