Web 存储机制

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Web存储机制,在这里主要聊有关于Web Storage API提供的存储机制,通过该机制,浏览器可以安全地存储键值对,比使用cookie更加直观。接下来简单的了解如何使用这方面的技术。

基本概念

Web Storage 包含两种机制:

  • sessionStorage为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)
  • localStorage同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在

这两种机制是通过Window.sessionStorageWindow.localStorage属性使用。更确切的说,在支持的浏览器中Window对象实现了WindowLocalStorageWindowSessionStorage对象并挂在其localStoragesessionStorage属性下。调用其中任一对象会创建Storage对象,通过Storage对象,可以设置、获取和移除数据项。对于每个源sessionStoragelocalStorage使用不同的Storage对象。

例如,在文档中调用localStorage将会返回一个Storage对象,调用sessionStorage返回一个不同的Storage对象。可以使用相同的方式操作这些对象,但是操作是独立的。

在了解如何使用localStoragesessionStorage之前,先来一下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():调用该方法会清空存储中的所有键名

简单的示例

写一个简单的示例,页面就三个按钮:SetGetRemove。按钮点击时,分别绑定三个函数:setStorage()getStorage()removeStorage()

  • setStorage():做了localStoragesessionStorage存储,同时存的键名为name,键值为W3cplus.com
  • getStorage():取得存储的name,并打印出来
  • removeStorage():移除setStorage()函数中存储的name
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/web-storage.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部