sessionStorage与localStorage用法详解

sessionStorage与localStorage二者都是H5新增的api用于本地存储

sessionStorage：仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

localStorage：生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

浏览器兼容性：大家用的时候参照这张图

sessionStorage与localStorage用法详解

如果要做判断浏览器是否支持的话可以这样写：

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的值

sessionStorage与localStorage用法详解

再看页面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>

效果图：没有显示出存储的两个值

sessionStorage与localStorage用法详解

当我们点击了A页面中的按钮改变了默认的存储值后再去页面B（注意：不要刷新页面B）看看会出现什么情况

sessionStorage与localStorage用法详解

此时再页面无刷新的情况下也获取到了改变后的值，这就是因为在这个页面已经注册了storage监听事件。