网页上进行数据的存储和读取（cookie和local）

万能守恒定律

已于 2023-04-26 08:58:09 修改

阅读量443

点赞数 2

分类专栏： h5+c3 文章标签： javascript 前端

于 2022-03-30 16:18:48 首次发布

本文链接：https://blog.csdn.net/qq_50951790/article/details/123849244

版权

h5+c3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- localStorage的生命周期是永久的，只要不人为删除，就不会减少
        sessionSrorage的生命周期是浏览器工作时间，关闭浏览器，则数据删除
    -->
    <p>姓名：<input type="text" name="" id="username"></p>
    <p>email：<input type="email" name="" id="email"></p>
    <p>年龄：<input type="number" name="" id="age"></p>
    <button onclick="saveCookie()">cookie存储数据</button>
    <button onclick="saveLocal()">local存储数据</button>
    <button onclick="getLocal()">local取数据</button>
    <button onclick="clearLocal()">清空数据</button>
    <button onclick="deleteLocal()">删除数据</button>
    <p><span id="detial"></span></p>
</body>
<script>
    var username = document.querySelector("#username")
    var email = document.querySelector("#email")
    var age = document.querySelector("#age")
    var detial = document.querySelector("#detial")

    function saveCookie(){
        document.cookie="username="+username.value;
        document.cookie="email="+email.value;
        document.cookie="age="+age.value;
    }

    function saveLocal(){
        if(window.localStorage){
            //(key,value)存储方式，相同的key值只能存在一个
            localStorage.setItem("username",username.value);
            //数组存储方式
            localStorage["email"]=email.value;
            //通过点的形式寻找
            localStorage.age=age.value;
        } 
        else{
            alert("您的浏览器不支持localStorage")
        }
    }

    function getLocal(){
        if(window.localStorage){
            //取出来展现在页面上
           //detial.innerHTML += localStorage.getItem("username")+"<br>email:"+localStorage["email"]+"<br>age:"+localStorage.age
            
           //当key值很多的时候，采用循环
           for(let i=0;i<localStorage.length;i++){
               detial.innerHTML +="<br>username:"+localStorage.getItem("username")+"<br>email:"+localStorage["email"]+"<br>age:"+localStorage.age
           }
        } 
        else{
            alert("您的浏览器不支持localStorage")
        }
    }

    function clearLocal(){
        //清空所有
        localStorage.clear();
    }

    function deleteLocal(){
        localStorage.removeItem("username")
    }
</script>
</html>

cookie和local的存储与读取方式几乎是一样的，明白其一就明白了第二个了

万能守恒定律

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页上进行数据的存储和读取（cookie和local）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫