H5数据本地存储webStore

最新推荐文章于 2024-06-25 20:29:52 发布

小菜101

最新推荐文章于 2024-06-25 20:29:52 发布

阅读量1k

点赞数 2

分类专栏： H5 文章标签： H5 webStore

本文链接：https://blog.csdn.net/github_36091081/article/details/52826542

版权

H5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webStorage脑图：

实例代码：




    
   
   
    web-storage
    



   
   
    
    
    请输入姓名：
    
    
    
    
    
    

    
    
    请输入性别：
    
    
    
    
    
    
        
     
     
        
     
     
        
     
     
    
    
    
    
    
    
    
    
    

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




    
   
   
    web-storage
    



   
   
    
    
    请输入姓名：
    
    
    
    
    
    

    
    
    请输入性别：
    
    
    
    
    
    
        
     
     
        
     
     
    
    
    
    
    
    
    
    
    

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