美文网首页
JavaScript Cookie

JavaScript Cookie

作者: S大偉 | 来源:发表于2018-02-23 13:53 被阅读0次

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

什么是 Cookie?

Cookie 是一些数据, 存储于你电脑上的文本文件中。

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

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":
当用户访问 web 页面时,他的名字可以记录在 cookie 中。
在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

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

username=John Doe

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

使用 JavaScript 创建Cookie

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

//JavaScript 中,创建 cookie 如下所示:
document.cookie="username=John Doe";

//可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

//可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

使用 JavaScript 读取 Cookie

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

使用 JavaScript 修改 Cookie

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
//旧的 cookie 将被覆盖。

使用 JavaScript 删除 Cookie

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

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
//删除时不必指定 cookie 的值

Cookie 字符串

即使在 document.cookie 中写入一个完整的 cookie 字符串, 当重新读取该 cookie 信息时,cookie 信息是以名/值对的形式展示的。

如果设置了新的 cookie,旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中,所以如果重新读取document.cookie,将获得如下所示的数据:
cookie1=value; cookie2=value;

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

JavaScript Cookie 实例

首先,访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。
访问者下一次访问页面时,他会看到一个欢迎的消息。

创建 3 个 JavaScript 函数:

  • 设置 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.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

获取 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 值的函数

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

相关文章

  • 【JS】JavaScript Cookie(js-cookie)

    什么是JavaScript Cookie(js-cookie) JavaScript Cookie是一个简单、轻巧...

  • cookie实战

    使用JavaScript操作cookie 创建和存储cookie。 2.读取cookie值 3.判断cookie是...

  • cookie简介

    1、获取Cookie: 2、设置Cookie: 由于cookie保存在客户端的电脑上,所以,JavaScript和...

  • cookie

    javascript里的document.cookie是文本形式的:document.cookie="userId...

  • js-cookie

    js-cookie 用于处理 cookie 的简单、轻量级 JavaScript APIgitHub官方地址:ht...

  • JS操作cookie的方法

    运用JS设置cookie、读取cookie、删除cookie JavaScript是运行在客户端的脚本,因此一般是...

  • Kali Linux-网络安全之-XSS 跨站脚本攻击原理及 D

    XSS 跨站脚本攻击 使用 JavaScript 创建 Cookie JavaScript 可以使用 docume...

  • JavaScript Cookie

    一、简介 在登录页的开发中,往往需要存储账号密码,可以使用cookie实现,在JavaScript中,有一个coo...

  • JavaScript Cookie

    Cookie 用于存储 web 页面的用户信息。 什么是 Cookie? Cookie 是一些数据, 存储于你电脑...

  • JavaScript Cookie

    Cookie就是由服务器发给客户端的特殊信息,而这些信息以文本文件的方式存放在客户端,然后客户端每次向服务器发送请...

网友评论

      本文标题:JavaScript Cookie

      本文链接:https://www.haomeiwen.com/subject/ivntxftx.html