zoukankan      html  css  js  c++  java
  • JavaScript BOM Cookie 的用法

    JavaScript Cookie

    Cookie是计算机上存储在小文本文件中的数据。当Web服务器将网页发送到浏览器时,连接将关闭,服务器将忘记用户的所有内容。发明Cookie是为了解决“如何记住用户信息”的问题:
    当用户访问网页时,他/她的名字可以存储在cookie中。
    下次用户访问该页面时,cookie会“记住”他/她的名字。
    Cookie以键值对形式保存,如:

    username = John Doe

    当浏览器从服务器请求网页时,属于该页面的cookie将添加到请求中。这样,服务器获取必要的数据以“记住”有关用户的信息。
    如果您的浏览器已关闭本地Cookie支持,则以下示例均无效。

    使用JavaScript创建Cookie

    JavaScript可以使用document.cookie属性创建,读取和删除cookie。使用JavaScript,可以像这样创建一个cookie:

    document.cookie = "username=John Doe";

    您还可以添加到期日期(以UTC时间为单位)。默认情况下,在浏览器关闭时删除cookie:

    document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

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

    document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

    使用JavaScript阅读Cookie

    使用JavaScript,cookie可以像这样读取:

    var x = document.cookie;

    document.cookie将返回一个字符串中的所有cookie,如:cookie1 = value; cookie2 =值; cookie3 =值;

    使用JavaScript更改Cookie

    使用JavaScript,您可以像创建cookie一样更改cookie:

    document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 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字符串

    document.cookie属性看起来像普通的文本字符串。但事实并非如此。即使你将一个完整的cookie字符串写入document.cookie,当你再次读出它时,你只能看到它的名称 - 值对。如果您设置了新cookie,则不会覆盖较旧的cookie。新的cookie被添加到document.cookie,所以如果你再次阅读document.cookie,你会得到类似的东西:cookie1 = value; cookie2 = value;
    如果要查找一个指定cookie的值,则必须编写一个JavaScript函数来搜索cookie字符串中的cookie值。

    JavaScript Cookie示例

    在下面的示例中,我们将创建一个存储访客姓名的cookie。访问者第一次到达网页时,将要求他/她填写他/她的姓名。然后将名称存储在cookie中。下次访问者到达同一页面时,他/她将收到欢迎信息。在这个例子中,我们将创建3个JavaScript函数:

    1. 用于设置cookie值的函数
    2. 获取cookie值的函数
    3. 用于检查cookie值的函数
    4. 设置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的名称(cname),cookie的值(cvalue)以及cookie到期之前的天数(exdays)。该函数通过将cookiename,cookie值和expires字符串相加来设置cookie。
    获取Cookie的功能
    然后,我们创建一个function返回指定cookie的值:

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

    功能说明:
    将cookiename作为参数(cname)。使用要搜索的文本(cname +“=”)创建变量(名称)。解码cookie字符串,处理带有特殊字符的cookie,例如'$'将分号上的document.cookie拆分为名为ca的数组(ca = decodingCookie.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,它将显示一个提示框,询问用户的名称,并通过调用setCookie函数将用户名cookie存储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.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);
        }
      }
    }

    上面的示例checkCookie()在页面加载时运行该函数。
    更详情的Cookie技术文章

  • 相关阅读:
    【Azure Redis 缓存】Azure Redis 功能性讨论二
    【Azure Developer】如何用Microsoft Graph API管理AAD Application里面的Permissions
    【Azure 环境】通过Python SDK收集所有订阅简略信息,例如订阅id 名称, 资源组及组内资源信息等,如何给Python应用赋予相应的权限才能获取到信息呢?
    【Azure 应用服务】App Service与APIM同时集成到同一个虚拟网络后,如何通过内网访问内部VNET的APIM呢?
    【Azure 云服务】如何从Azure Cloud Service中获取项目的部署文件
    【Azure Redis 缓存】Azure Redis 异常
    【Azure 微服务】基于已经存在的虚拟网络(VNET)及子网创建新的Service Fabric并且为所有节点配置自定义DNS服务
    【Azure Redis 缓存】遇见Azure Redis不能创建成功的问题:至少一个资源部署操作失败,因为 Microsoft.Cache 资源提供程序未注册。
    【Azure Redis 缓存】如何得知Azure Redis服务有更新行为?
    【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误
  • 原文地址:https://www.cnblogs.com/jc2182/p/11286652.html
Copyright © 2011-2022 走看看