sessionStorage与localStorage二者都是H5新增的api用于本地存储
sessionStorage:仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。
localStorage:生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
浏览器兼容性:大家用的时候参照这张图
如果要做判断浏览器是否支持的话可以这样写:
if(window.localStorage){
alert("支持");
}else{
alert("不支持");
}
接下来介绍一下常用的方法(增删改查):
sessionStorage.setItem("key","val");//新增一个本地存储
sessionStorage.getItem("key");//取得相对应的存储
sessionStorage.removeItem("key");//移除某个本地存储
sessionStorage.clear();//清空所有的本地存储
localStorage.setItem("key","val");//新增一个本地存储
localStorage.getItem("key");//取得相对应的存储
localStorage.removeItem("key");//移除某个本地存储
localStorage.clear();//清空所有的本地存储
接下来我们再思考一个问题:如果我在一个页面中修改了某个key的值并且想让另一个打开的页面也能监听到这个改变并修改,那么我们应该怎样实现呢?其实localStorage已经给我们提供了一个storage监听事件。
引用《h5移动web开发指南》上的话:
“当同源页面的某个页面修改了
localStorage
,其余的同源页面只要注册了storage事件,就会触发”
所以,localStorage
的例子运行需要如下条件:
- 同一浏览器打开了两个同源页面
- 其中一个网页修改了
localStorage
- 另一网页注册了
storage
事件
在事件处理函数中,触发事件的事件对象(event参数值)具有如下几个属性
event.key 属性:属性值为在 session 或 localStorage 中被修改的数据键值。
event.oldValue 属性:属性值为在 sessionStorage 或 localStorage 中被修改的值。
event.newValue 属性:属性值为在 sessionStorage 或 localStorage 中被修改后的值
event.url 属性:属性值为修改 sessionStorage 或 localStorage 中值的页面的URL地址
event.storageArea 属性 : 属性值为被变动的 sessionStorage 对象或 localStorage 对象
接下来我会写两个页面来展示一下具体的用法:
页面A:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>页面A</title>
</head>
<body>
<form>
<div><input type="text" placeholder="name" id="name"></div>
<div><input type="password" placeholder="password" id="pass"></div>
<button type="button" id="btn">确定</button>
</form>
<script>
localStorage.setItem("userName","aaa");
localStorage.setItem("userPass","123");
btn.onclick=function(){
var name=document.getElementById("name").value;
var pass=document.getElementById("pass").value;
var btn=document.getElementById("btn");
if(name==""){
alert("请输入用户名!");
return false;
}else if(pass==""){
alert("请输入密码!");
return false;
}else{
localStorage.setItem("userName",name);
localStorage.setItem("userPass",pass);
// window.location.href="B.html";
}
}
</script>
</body>
</html>
页面A打开之后的效果图是这样的:浏览器中存储了我们默认的userName和userPass的值
再看页面B.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>页面B</title>
</head>
<body>
<script>
window.addEventListener("storage",function(e){
console.log("e:"+e);
console.log("key:"+e.key);
console.log("oldValue:"+e.oldValue);
console.log("newValue:"+e.newValue);
console.log("src:"+e.src);
console.log("url:"+e.url);
console.log("storageArea:"+e.storageArea);
})
</script>
</body>
</html>
效果图:没有显示出存储的两个值
当我们点击了A页面中的按钮改变了默认的存储值后再去页面B(注意:不要刷新页面B)看看会出现什么情况
此时再页面无刷新的情况下也获取到了改变后的值,这就是因为在这个页面已经注册了storage监听事件。