1.localStorage和sessionStorage功能
早期的web中使用cookies在客户端保存诸如用户名等简单的信息,但是,在使用cookies存储永久数据存在以下问题。
1.cookies的大小限制在4kB,不适合大量的数据存储。
2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。
3 cookies是随HTTP事务一起被发送的,因此会浪费一部分带宽。
HTML5很好的提供了本地存储的功能,以键值对存储的解决方案,支持容量至少为4M,HTML5的web提供了两种客户端存储方式。
localStorage:是一种没有时间限制的数据存储方式,可以将数据永久保存在客户端。
sessionStorage:指的是针对一个session的数据存储,即将数据保存在session对象中,当关闭浏览器后,这些数据就被删除。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
web Storage支持的属性与方法
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
getItem(key):获取指定key所存储的value值
key(index)方法:返回列表中对应索引的key值
length属性:返回key/value队列的长度
removeItem(key)方法:从Storage中删除一个对应的键值对。
setItem(key,value)方法:将value存储到key指定的字段。
clear()方法:移除所有的内容
存:三种方法
let ls = localStorage;
ls.setItem("id",666);
ls.name = "老王";
ls["pwd"] = 123456;
let ss = sessionStorage;
ss.setItem("id",666);
ss.name = "老王";
ss["pwd"] = 123456;
取:
console.log(ls.getItem("id"));
console.log(ls.name);
console.log(ls["pwd"]);
改:与存的方式相同,key不在则创建,key在则修改value。
遍历:
let ls = localStorage;
for(let i=0;i<ls.length; i++){
console.log(ls.key(i));
}
删:
let ls = localStorage;
ls.clear();//全部删除
ls.removeItem("name");//根据key值删除