H5本地存储localStorage,sessionStorage用法

localStorage、sessionStorage 是 Html5 的特性,IE7 以下浏览器不支持。

现代浏览器普遍开始支持 H5 本地存储,localStorage、sessionStorage:可以用来代替 cookie 的一部分存储功能,它比 cookie 存储量更大。

他们存值都是以键值对形式存在,值也是存入字符串类型(如果是对象,就序列化以后再存入)。

localStorage 和 sessionStorage 的区别

1、localStorage 和 sessionStorage 一样都是用来存储客户端临时信息的对象;

2、他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现);

3、localStorage 生命周期是永久的,这意味着除非用户在浏览器手动清除 localStorage 信息,否则这些信息将永远存在;sessionStorage 生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过 sessionStorage 存储的数据也就被清空了;

4、不同浏览器无法共享 localStorage 或 sessionStorage 中的信息,相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享 sessionStorage 的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享 sessionStorage 的。

5、举例说明:

http://www.helloweb.wang        

https://www.helloweb.wang (不同源,因为协议不同)

http://my.helloweb.wang      (不同源,因为主机名不同)

http://www.helloweb.wang:8080(不同源,因为端口不同)

localStorage 和 sessionStorage 的用法

localStorage 和 sessionStorage 使用时使用相同的API

localStorage.setItem("key","value"); //以“key”为名称存储一个值“value”
localStorage.getItem("key"); //获取名称为“key”的值

枚举localStorage的方法:

for(var i=0;i<localStorage.length;i++){
     var name = localStorage.key(i);
     var value = localStorage.getItem(name);
}

删除 localStorage 中存储信息的方法:

localStorage.removeItem("key"); //删除名称为“key”的信息。
localStorage.clear(); //清空localStorage中所有信息


以下简单演示增删改查的用法:  

if(window.sessionStorage){
    alert("ok");
}else{
    alert('fail');
}

//设置值
sessionStorage.setItem("key_a",1);

//取值
var key_a = sessionStorage.getItem("key_a");
console.log(key_a);  //1

//删除值
sessionStorage.removeItem("key_a");
console.log(sessionStorage.getItem("key_a"));  //null

sessionStorage.setItem("key_b",1);
sessionStorage.setItem("key_c",2);

//清除所有的键值对
sessionStorage.clear();

console.log(sessionStorage.getItem("key_b"));//null
console.log(sessionStorage.getItem("key_c"));//null
//设置值和取值也可以用 . 语法;
//设置值
sessionStorage.key_d=3;
console.log(sessionStorage.key_d);

//有个小区别:使用 .语法访问不到时返回undefined , getItem访问不到时返回null
console.log(sessionStorage.key_null); //undefined
console.log(sessionStorage.getItem("key_null")); //null


var obj={
    a:12,
    b:[1,2,3,4,5],
    c:{
        x:'a',
        y:['bb',12,'cc',{a:1,b:2}],
        z:1222
    }
}
sessionStorage.setItem("page",JSON.stringify(obj));

//取值
var page=JSON.parse(sessionStorage.getItem("page"));
console.log(page);  //已经拿到缓存值

//遍历数组
for(var i=0;i<page.b.length;i++){
    console.log(page.b[i]);
}

//遍历对象 用 for in
for(var key in page.c){
    console.log(page.c[key]);
}

//遍历数组
for(var j=0;j<page.c.y.length;j++){
    console.log(page.c.y[j]);
}

//删除
sessionStorage.removeItem('page');

console.log(sessionStorage.getItem("page"));



原文链接:HelloWeb前端网 » H5本地存储localStorage,sessionStorage用法 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享