首页 > Web开发 > 详细

H5--Web Storage

时间:2020-03-24 23:34:58      阅读:67      评论:0      收藏:0      [点我收藏+]
  在过去的web开发中,对于开发交互式的程序,我们经常使用cookie来满足状态存储的需求。但是这种方式有很多缺点,首先就是大小和数量的限制,一般cookie被限制在4k左右,所以严格来说cookie不算本地存储技术,因为每次发送http请求都要带上cookie,如果数据太多会严重影响传输性能,所以cookie有很多的不足,于是html5中为本地存储定义了新的内容webstorge.
  web Storage提供了一种比cookie更加直观的方式存储的名/值对。
  Web Storage包含以下两种机制:
  1. sessionStorage,为每个给定的源维持一个独立的存储区域,该存储区域在页面会话期间可用(只要浏览器处于打开状态)
  2. localStorage,同样的功能,但是在浏览器关闭,然后打开数据仍然存在。
这两种机制可通过window.sessionStorage及window.localStorage进行访问
 

1 属性:

length属性
length属性是只读属性,返回整数,表示存储在Storage对象中的数据项的数量
console.log(sessionStorage.length);

2 方法:

setItem()
将键名添加到存储区域内,如果键名已存在,则更新原来的值,如果不存在,则新增数据项:
 
// storage对象.setItem(key,value)
window.sessionStorage.setItem(‘username‘,‘Tom‘);
 sessionStorage.setItem(‘password‘,‘123‘);
getItem()
getItem()方法用于根据指定的键名返回对应的键值:
console.log(localStorage.getItem(‘username‘));
console.log(localStorage.getItem(‘password‘));
removeItem()
removeItem()方法用于删除指定键名的数据项,如果不存在与给定的键名,则不执行任何操作:
localStorage.removeItem(‘password‘);
clear()
clear()方法用于清除存储的所有数据项:
localStorage.clear();

 key()

key()用于返回指定索引值的键名,语法结构是:
console.log(localStorage.key(0));

 注意:storage中存储键的顺序是按照字母排列的

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

H5--Web Storage

原文:https://www.cnblogs.com/codexlx/p/12562936.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!