<meta>
    <title>web-storage</title>
    <style>
        #content{
            border:1px solid #158687;
            width: 300px;
            height: 200px;
        }
    </style>
   <section>
    <label>请输入姓名：</label>
    <input type="text" id="one">
    <br>
    <label>请输入性别：</label>
    <input type="text" id="two">
    <div>
     <button>保存</button>
     <button>显示</button>
     <button>删除</button>
    </div>
    <hr>
    <div id="content"></div>
   </section>
<script>
    console.log(sessionStorage);
    console.log(localStorage);
    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var btns = document.getElementsByTagName("button");
    var content = document.getElementById("content");
    btns[0].onclick = function () {
        var a= one.value;
        var b = two.value;
        if(a&&b){
            //sessionStorage.setItem("name",a);// 为指定的name设置一个对应的值
            //sessionStorage.setItem("age",b);
            localStorage.setItem("name",a);
            localStorage.setItem("age",b);
            alert("保存成功！");
        }else{
            alert("请完善输入");
        }
    };
    btns[1].addEventListener("click",function () {
        //var name = sessionStorage.getItem("name"); //根据指定的名字 name 获取指定的值
        //var age = sessionStorage.getItem("age");
        var name = localStorage.getItem("name");
        var age = localStorage.getItem("age");
        content.innerText = "姓名为:"+ name+"年龄为："+age;
    },true);
    btns[2].addEventListener("click",function () {
        localStorage.removeItem("name");   // 删除由name指定的键值对
        //localStorage.clear();   //  删除所有值
        alert("删除成功！");
    },true);
    //事件，在修改值时激发 storage 当在【其他页面】中修改sessionStorage或者localStorage中的值时要执行的处理
    window.onstorage = function (event) {
        var key = event.key;                      //修改的key
        var oldValue = event.oldValue;          //修改前key 的value值
        var newValue = event.newValue;          //修改后key 的value值
        console.log('key:',key);
        console.log("oldValue",oldValue);
        console.log("newValue",newValue);
    };
</script>
   <meta>
    <title>web-storage</title>
    <style>
        #content{
            border:1px solid #158687;
            width: 300px;
            height: 200px;
        }
    </style>
   <section>
    <label>请输入姓名：</label>
    <input type="text" id="one">
    <br>
    <label>请输入性别：</label>
    <input type="text" id="two">
    <div>
     <button>保存</button>
     <button>显示</button>
    </div>
    <hr>
    <div id="content"></div>
   </section>
<script>
    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var btns = document.getElementsByTagName("button");
    //var content = document.getElementById("content");
    btns[0].onclick = function () {
        var a= one.value;
        var b = two.value;
        if(a&&b){
            //sessionStorage.setItem("name",a);// 为指定的name设置一个对应的值
            //sessionStorage.setItem("age",b);
            localStorage.setItem("name",a);
            localStorage.setItem("age",b);
            alert("修改成功！");
        }else{
            alert("请完善输入");
        }
    };
</script>