JS的Web Storage和Cookie

最新推荐文章于 2024-05-07 23:11:20 发布

番茄粥

最新推荐文章于 2024-05-07 23:11:20 发布

阅读量136

点赞数

分类专栏： JavaScript 文章标签： javascript session cookie

本文链接：https://blog.csdn.net/Milky_Yankee/article/details/116306263

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS的Web Storage

Web Storage 将少量的数据储存于客户端中，分为localStorage和sessionStorage
localStorage 可应用于同一网站/网页的可跨窗口和分页
sessionStorage 只对当前网页有效，关闭浏览器窗口后数据已丢失
cookie 在本地存储数据，起初用于客户端和服务端进行会话时使用，只能存储数据量较小的数据4KB，主要实现对前端数据的增删读操作。
每个cookie都是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。
若想一次存储多个键值对，可以使用分号加空格（; ）隔开。用escape()函数进行编码，能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，避免中文乱码的出现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Storage</title>
</head>
<body>
<p><label>请输入要储存的数据：</label><input type="text" placeholder="value" value=""></p>
&nbsp;<button>save</button>&nbsp;<button>read</button>&nbsp;<button>delete</button>
<p id="result"></p>
</body>
</html>

localStorage
1.存储数据：window.localStorage.setItem(‘name’,‘content’);
2.读取数据：window.localStorage.getItem(‘name’);
3.删除数据：window.localStorage.removeItem(‘name’);
(window可省略)

<script>
    if(typeof(localStorage) === 'undefined'){
        alert('当前浏览器不支持存储数据');
    }else{
        let savebtn = document.getElementsByTagName('button')[0];
        let readbtn = document.getElementsByTagName('button')[1];
        let delbtn = document.getElementsByTagName('button')[2];
        let result = document.getElementById('result');
        // 点击save按钮，存储数据
        savebtn.onclick = function (){
            let content = document.getElementsByTagName('input')[0].value;
            if(content){
                window.localStorage.setItem('name',content);
                // 以下两种方法与上面同效果
                // window.localStorage['name']=content;
                // window.localStorage.name=content;
                result.innerHTML = "储存数据成功";
            }else{
                result.innerHTML = "请填写数据";
            }
        }
        // 点击read按钮 读取数据
        readbtn.onclick = function (){
            result.innerText = window.localStorage.getItem('name') || "没有数据储存";
            // result.innerText = localStorage['name'] || "没有数据储存";
            // result.innerText = localStorage.name || "没有数据储存";
        }
        // 点击delete按钮，删除数据
        delbtn.onclick = function (){
             if(window.localStorage.getItem('name')){
                 window.localStorage.removeItem('name');
            //     // delete localStorage['name'];
            //     // delete localStorage.name;
                 result.innerHTML = "删除数据成功";
             }else{
                 result.innerHTML = "没有数据储存";
             }
        }
    }
</script>

sessionStorage
1.存储数据：window.sessionStorage.setItem(‘name’,‘content’);
2.读取数据：window.sessionStorage.getItem(‘name’);
3.删除数据：window.sessionStorage.removeItem(‘name’);
(window可省略)

<script>
    if(typeof(sessionStorage) === 'undefined'){
        alert('当前浏览器不支持存储数据');
    }else{
        let savebtn = document.getElementsByTagName('button')[0];
        let readbtn = document.getElementsByTagName('button')[1];
        let delbtn = document.getElementsByTagName('button')[2];
        let result = document.getElementById('result');
        // 点击save按钮，存储数据
        savebtn.onclick = function (){
            let content = document.getElementsByTagName('input')[0].value;
            if(content){
                window.sessionStorage.setItem('name',content);
                // 以下两种方法与上面同效果
                // window.sessionStorage['name']=content;
                // window.sessionStorage.name=content;
                result.innerHTML = "储存数据成功";
            }else{
                result.innerHTML = "请填写数据";
            }
        }
        // 点击read按钮 读取数据
        readbtn.onclick = function (){
            result.innerText = window.sessionStorage.getItem('name') || "没有数据储存";
            // result.innerText = sessionStorage['name'] || "没有数据储存";
            // result.innerText = sessionStorage.name || "没有数据储存";
        }
        // 点击delete按钮，删除数据
        delbtn.onclick = function (){
             if(window.sessionStorage.getItem('name')){
                 window.sessionStorage.removeItem('name');
            //     // delete sessionStorage['name'];
            //     // delete sessionStorage.name;
                 result.innerHTML = "删除数据成功";
             }else{
                 result.innerHTML = "没有数据储存";
             }
        }
    }
</script>

Cookie
键值对 NAME=VALUE 存储，NAME重名则会被覆盖
Expires 过期时间，在设置的某个时间点后该 Cookie 就会失效，返回一个UTC时间
Max-Age 过期时间，功能与Expires一样，单位是秒
Domain 该Cookie 生效的域名，如 domain=“www.baidu.com”，在该域名下的所有主机都可以访问该cookie，其他的不可以访问
Path 表示该Cookie 是仅在哪个路径下使用的，如 path=/wp-admin/
Secure 如果设置了这个属性，那么只会在 SSH 连接时才会回传该 Cookie

1.存储cookie 数据
document.cookie = “name=value; expires/max-age=exdays”;
2.读取cookie 数据，会将这个cookie数据读出，以‘；’分隔，所以需要自己进行分割处理。
var arrCookie = document.cookie;
3.删除cookie 数据，只需要设置 expires 参数为以前的时间即可或Max-Age=0

<script>
        let savebtn = document.getElementsByTagName('button')[0];
        let readbtn = document.getElementsByTagName('button')[1];
        let delbtn = document.getElementsByTagName('button')[2];
        let result = document.getElementById('result');
        
        function setCookie(cname,cvalue,exdays){
            var date=new Date();
            date.setTime(date.getTime()+exdays*1000*3600); //小时
            var expires = "expires="+date.toGMTString();
            var str = cname+"="+cvalue;
            document.cookie = str+"; "+expires ;
            // 设置max-age则只需要一条，但记得max-age的单位是秒
            // document.cookie = str+"; max-age="+exdays;
        }
        savebtn.onclick = function (){
            let content = document.getElementsByTagName('input')[0].value;
            if(content){
            //设置cookie
                setCookie("name",content,5);
                result.innerHTML = "储存数据成功";
            }else{
                result.innerHTML = "请填写数据";
            }
        }
        readbtn.onclick = function (){
           // 暂时只存储一条数据，不用做分割处理
            result.innerText = document.cookie || "没有cookie 数据储存";
        }
        delbtn.onclick = function (){
            let content = document.cookie;
            if(content){
                setCookie("name",content,-2);
                result.innerHTML = "删除数据成功";
            }else{
               
        }
    }
</script>

在这里插入图片描述

番茄粥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS的Web Storage和Cookie

JS的Web StorageWeb Storage 将少量的数据储存于客户端中，分为localStorage和sessionStoragelocalStorage 可应用于同一网站/网页的可跨窗口和分页sessionStorage 只对当前网页有效，关闭浏览器窗口后数据已丢失cookie 在本地存储数据，起初用于客户端和服务端进行会话时使用，只能存储数据量较小的数据4KB，主要实现对前端数据的增删读操作。每个cookie都是以键值对的形式保存的，即key=value的格式。各个cookie之间一般
复制链接

扫一扫