当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JavaScript BOM Cookie 的用法

JavaScript BOM Cookie 的用法

2019年08月02日  | 移动技术网IT编程  | 我要评论

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技术文章

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网