• JavaScript 68 JavaScript Browser BOM 68.8 JavaScript Cookies

    JavaScript

    文章目录

    68 JavaScript Browser BOM

    68.8 JavaScript Cookies

    Cookie 让您在网页中存储用户信息。

    68.8.1 什么是 cookie？

    Cookie 是在您的计算机上存储在小的文本文件中的数据。

    当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

    Cookie 是为了解决“如何记住用户信息”而发明的：

    • 当用户访问网页时，他的名字可以存储在 cookie 中。
    • 下次用户访问该页面时，cookie 会“记住”他的名字。

    Cookie 保存在名称值对中，如：

    username = Bill Gates

    • 1

    当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

    如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。

    68.8.2 通过 JavaScript 创建 cookie

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

    创建 cookie：

    document.cookie = "username=Bill Gates";

    • 1

    添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

    document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

    • 1

    通过 path 参数可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

    document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

    • 1
    68.8.3 通过 JavaScript 读取 cookie

    通过 JavaScript，可以这样读取 cookie：

    var x = document.cookie;

    • 1

    document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

    68.8.4 通过 JavaScript 改变 cookie

    通过使用 JavaScript，可以像创建 cookie 一样改变它：

    document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

    • 1

    旧 cookie 被覆盖。

    68.8.5 通过 JavaScript 删除 cookie

    删除 cookie 非常简单。

    删除 cookie 时不必指定 cookie 值：

    直接把 expires 参数设置为过去的日期即可：

    document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

    • 1

    应该定义 cookie 路径以确保删除正确的 cookie。

    如果不指定路径，一些浏览器不会让你删除 cookie。

    68.8.6 Cookie 字符串

    document.cookie 属性看起来像一个正常的文本字符串。但它不是。

    即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。

    如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：

    cookie1 = value; cookie2 = value;

    • 1

    在这里插入图片描述

    在这里插入图片描述

    如果想找到一个指定 cookie 的值，必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。

    68.8.7 JavaScript Cookie 实例

    创建一个 cookie 来存储访问者的名称。

    访客第一次到达网页时，会要求他填写姓名。然后将该名称存储在 cookie 中。

    下次访客到达同一页时，他将收到一条欢迎消息。

    【设置 cookie 的函数】

    创建一个函数，将访问者的名字存储在 cookie 变量中：

    function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    解释：cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）。

    通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。

    【获取 cookie 的函数】

    创建一个函数返回指定 cookie 的值：

    function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    解释：

    把 cookie 作为参数（cname）。

    创建变量（name）与要搜索的文本（CNAME”=”）。

    解码 cookie 字符串，处理带有特殊字符的 cookie，例如 “$”。

    用分号把 document.cookie 拆分到名为 ca（decodedCookie.split(‘;’)）的数组中。

    遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]。

    如果找到 cookie（c.indexOf(name) == 0），则返回该 cookie 的值（c.substring(name.length, c.length）。

    如果未找到 cookie，则返回 “”。

    【检测 cookie 的函数】

    创建检查 cookie 是否设置的函数。

    如果已设置 cookie，将显示一个问候。

    如果未设置 cookie，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365 天，通过调用 setCookie 函数：

    function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
} 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    【组合起来】

    function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  var user=getCookie("username");
  if (user != "") {
    alert("再次欢迎您，" + user);
  } else {
     user = prompt("请输入姓名：","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
script>
head>

<body onload="checkCookie()">body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    在这里插入图片描述

    在页面加载后运行 checkCookie() 函数。

  • 相关阅读:
    网络编程_sgu（620-635）
    微服务设计模式-架构真题（六十八）
    PLC和工控机的网络特性
    Windows实现到WSL的免密登录
    漫画sql数据分析
    微服务设计：Spring Cloud API 网关概述
    git本地分支代码合并到主分支，主分支合并到我的分支
    手写一个自己的mystrstr
    设计模式之结构型模式
    数据分析入门，深入浅出的数据分析
  • 原文地址：https://blog.csdn.net/weixin_44226181/article/details/127782127