zoukankan      html  css  js  c++  java
  • JavaScript Cookie

    JavaScript Cookie

    Cookie用于存储web页面的用户信息。

    什么是Cookie?

    当web服务器向浏览器发送web页面时,在连接关闭后,服务端不会记录用户的信息。

    Cookie的作用就是用于解决“如何记录客户端的用户信息”:

       当用户访问web页面时,他的名字可以记录在cookie中。

       在用户下一次访问该页面时,可以在cookie中读取用户访问记录

    Cookie以名/值对形式存储,如下所示:

    username=John Don

    当浏览器从服务器上请求web页面时,属于该页面的cookie会被添加到该请求中。服务端通过这种方式来获取用户信息。

    使用 JavaScript 创建 Cookie

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

    JavaScript中,创建cookie如下所示:

    document.cookie=“username=Don“;

    您还可以为cookie添加一个过期时间(以UTC或GMT时间)。默认情况下,cookie在浏览器关闭时删除:

    document.cookie=“username=Jhon  Don;expires=Thu,18 Dec  2043  12:00:00  GMT";

    您可以使用path参数告诉浏览器cookie的路径。默认情况下,cookie属于当前页面。

    document.cookie=“username=Jhon Doe;expires=Thu, 18  Dec  2043  12:00:00 GMT;path=/”;

    使用 JavaScript 读取 Cookie

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

    var x = document.cookie;

    document.cookie 将以字符串的方式返回所有的 cookie,类型格式: cookie1=value; cookie2=value; cookie3=value;

    使用 JavaScript 修改 Cookie

    在JavaScript中,修改类似于创建cookie,如下所示:

    document.cookie将被覆盖。

    使用cookie非常简单。

    使用 JavaScript 删除 Cookie

    删除cookie非常简单。您只需要设置expires参数为以前的即可,如下所示,设置为 Thu,01 Jan  1970  00:00:00  GMT;

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

    注意,当您删除时不必指定cookie的值。

    Cookie 字符串

    document.cookie属性开起来像一个普通文本字符串,其实它不是。

    即使您在document.cookie中写入一个完整的cookie字符串,当您重新读取该cookie信息时,cookie信息是以名/值对的形式展示的。如果您设置了新的cookie,旧的cookie不会被覆盖。新cookie将添加到document.cookie中,所以如果您重新读取到document.cookie将获得以下数据:

    cookie1=value; cookie2=value;

    如果您需要找到一个指定的cookie值,您必须创建一个JavaScript函数在cookie字符串中查找cookie值。

    JavaScript Cookie 实例

    在以下实例中,我们将创建 cookie 来存储访问者名称。

    首先,访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。

    访问者下一次访问页面时,他会看到一个欢迎的消息。

    在这个实例中我们会创建 3 个 JavaScript 函数:

    1. 设置 cookie 值的函数
    2. 获取 cookie 值的函数
    3. 检测 cookie 值的函数

    设置 cookie 值的函数

    首先,我们创建一个函数用于存储访问者的名字:

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

    函数解析:

    以上的函数参数中,cookie 的名称为 cname,cookie 的值为 cvalue,并设置了 cookie 的过期时间 expires。

    该函数设置了 cookie 名、cookie 值、cookie过期时间。

    获取 cookie 值的函数

    然后,我们创建一个函数用户返回指定 cookie 的值:

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

    函数解析:

    cookie 名的参数为 cname。

    创建一个文本变量用于检索指定 cookie :cname + "="。

    使用分号来分割 document.cookie 字符串,并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(';'))。

    循环 ca 数组 (i=0;i<ca.length;i++),然后读取数组中的每个值,并去除前后空格 (c=ca[i].trim())。

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

    如果没有找到 cookie, 返回 ""。

    检测 cookie 值的函数

    最后,我们可以创建一个检测 cookie 是否创建的函数。

    如果设置了 cookie,将显示一个问候信息。

    如果没有设置 cookie,将会显示一个弹窗用于询问访问者的名字,并调用 setCookie 函数将访问者的名字存储 365 天:

    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);
        }
      }
    }

    完整实例

    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;
    }
     function getCookie(cname){
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i].trim();
            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);
            }
        }
    }

     

  • 相关阅读:
    智能推荐算法演变及学习笔记(三):CTR预估模型综述
    从中国农业银行“雅典娜杯”数据挖掘大赛看金融行业数据分析与建模方法
    智能推荐算法演变及学习笔记(二):基于图模型的智能推荐(含知识图谱/图神经网络)
    (设计模式专题3)模板方法模式
    (设计模式专题2)策略模式
    (设计模式专题1)为什么要使用设计模式?
    关于macOS上常用操作命令(持续更新)
    记录下关于RabbitMQ常用知识点(持续更新)
    EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. RENEWALS ARE LESSER THAN THRESHOLD AND HENCE THE INSTANCES ARE NOT BEING EXPIRED JUST TO BE SAFE.
    SpringCloud教程二:Ribbon(Finchley版)
  • 原文地址:https://www.cnblogs.com/Strong-stone/p/10331125.html
Copyright © 2011-2022 走看看