JavaScript cookie基础

最新推荐文章于 2022-02-19 10:16:24 发布

tigerto

最新推荐文章于 2022-02-19 10:16:24 发布

阅读量383

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/GSCurry/article/details/71336120

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

什么是Cookie?

Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以键值对（key=value）形式存储，例如：username=tigerto
当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

Cookie具有不可跨域名性：浏览器访问Google只会携带Google的Cookie，访问百度只会携带百度的Cookie。这一点由客户端管理的，也就是浏览器能保证不可跨域名性。例如查看Cookie时候是按域名划分的（下文某图）。

JavaScript创建Cookie

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

document.cookie="username=tigerto";

还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=May 07 2017 15:30:00 GMT";

当将expires设置为当前时间为准的以前时间就可以删除cookie，例如：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

可以不用指定cookie值。
务必牢记，名称和值中都不能包含空格或者如下的字符：

[ ] ( ) = , " / ? @ : ;

JavaScript读取Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

Cookie实例

为了方便起见，代码只设置key为username的cookie。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cookieTest</title>
</head>
<body onload="checkCookie()">
    <script>
        function getCookie() {
            var cookies = document.cookie;
            var arr_cookie = cookies.split(';');
            for(var i=0; i<arr_cookie.length; i++){
                var cookie = arr_cookie[i].trim();
                if(cookie.indexOf("username=") == 0){
                    return cookie.substring(("username=").length,cookie.length);
                }
            }
            return "";
        }

        function setCookie() {
            var cookieValue=document.getElementById("t_username").value;
            <!--最开始忘了加".value",浪费好长时间排除错误......-->
            var expireHours=document.getElementById("t_expireHours").value;
            var d = new Date();
            d.setTime(d.getTime()+(expireHours*60*60*1000));
            var expires = "expires="+d.toGMTString();
            document.cookie="username="+cookieValue+"; "+expires;
            alert("set cookie success")
        }

        function checkCookie(){
            var user = getCookie("username");
            if(user != ""){
                window.alert("username:"+user);
            }else{
                window.alert("cookie username not exists");
            }
        }
    </script>
    username:<input id="t_username" type="text">
    expireHour:<input id="t_expireHours" type="text">
    <hr>
    <button onclick="setCookie()">set username's Cookie</button>
</body>
</html>

效果：
step1：设置cookie

step2：查看浏览器中的cookie

这里写图片描述

找到本测试网页的cookie

这里写图片描述
可以看到，key为username，value为tigeryo，过期时间为一小时的cookie成功建立了起来，并存储在本地。
update：这个存储路径有误，应该是/web而不是/web/js。原因是我把这个页面发在了/web/js下…失误失误。如果用户访问的任何页面匹配了cookie中的路径和域名，那么浏览器将会重新将这个cookie发回给服务器。

step3：
刷新页面，读取cookie
这里写图片描述

tigerto

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript cookie基础

什么是Cookie?Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。 Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
复制链接

扫一扫