• 1、JavaScript中的Cookie 用于存储 web 页面的用户信息。


    总结:每个浏览器都有一定数量限制的cookie。每个浏览器中,每一个cookie都有一个path路径,指向请求访问的网页。

    ------------------------------------------------------------------------------------------------

    1、什么是 cookie?

    2、通过 JavaScript:创建  /读取 /改变  /删除 cookie

    3、Cookie 字符串

    4、JavaScript Cookie 实例 :设置  /获取  /检测 cookie 的函数

    -----------------------------------------------------------------------------------------------

    什么是 cookie?(前提:网页需要用户登陆才能请求访问)

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

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

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

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

    Cookie 保存在名称值对中,如:

    username = Bill Gates

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

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

    通过 JavaScript 创建 cookie

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

    创建 cookie:

    document.cookie = "username=Bill Gates";

    默认情况下,在浏览器关闭时会删除 cookie。

    可以添加有效日期(expires=UTC 时间):

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

    默认情况下,cookie 属于当前页。

    通过 path= 参数,您可以告诉浏览器 cookie 属于什么路径。

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

    通过 JavaScript 读取 cookie

    读取 cookie:

    var x = document.cookie;

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

    通过 JavaScript 改变 cookie

    像你创建 cookie 一样改变它:

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

    旧 cookie 被覆盖。

    通过 JavaScript 删除 cookie

    删除 cookie 非常简单。

    删除 cookie 时不必指定 cookie 值:

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

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

    应该定义 cookie 路径以确保删除正确的 cookie。不指定路径,一些浏览器不会让你删除 cookie。

    Cookie 字符串

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

    JavaScript Cookie 实例

    在下面的示例中,我们将创建一个 cookie 来存储访问者的名称

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

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

    例如,我们将创建 3 个JavaScript函数:

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

    设置 cookie 的函数

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

    /*
     *cname:cookie 的名字
     *cvalue:cookie 的值
     *exdays: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=/";  
    } 

    获取 cookie 的函数

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

    /*
     *把 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,则返回 ""。
    */
    function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');    //把cookie分割成组
        for(var i = 0; i <ca.length; i++) {   
            var c = ca[i];  //取得字符串
            while (c.charAt(0) == ' ') {  //返回在指定位置的字符&&判断一下字符串有没有前导空格
                c = c.substring(1);  //截取1之后余下所有作为字串&&有的话,从第二位开始取
             }
             if (c.indexOf(name) == 0) {//在字符串内进行检索,返回第一次出现的位置
                return c.substring(name.length, c.length);//提取字符串中介于两个指定下标之间的字符(即“=”和“;”之间的字符)。
             }
         }
        return "";
    } 
    /*
            while (c.charAt(0) == ' ') { 
                c = c.substring(1);  
             }
     */  
    //可被以下代码替代
     var c = ca[i].trim();   //去除前后空格 (c=ca[i].trim())。

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

    组合起来

    <!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>
  • 相关阅读:
    将文件读取到内存、打印pe结构
    DIV与IDIV的用法
    内存对齐与硬盘对齐
    逆向笔记013
    自己实现的字符串长度求取、复制、连接
    在一段内存中查找数据
    用Maven构建Mahout项目实现协同过滤ItemCF--集群版
    用Maven构建Mahout项目实现协同过滤userCF--单机版
    从源代码剖析Mahout推荐引擎
    推荐系统第2周--itemCF和userCF
  • 原文地址:https://www.cnblogs.com/Strugglinggirl/p/10981488.html
Copyright © 2020-2023  润新知