Js BOM Cookie的使用

更新日期: 2019-08-27阅读: 1.6k标签: 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()在页面加载时运行该函数。

链接: https://www.fly63.com/article/detial/7746

angular + nodejs + CORS 实现跨域不丢失cookie做法

angular的4200端口 向 nodejs的8080端口 发送一个post请求, 这会造成跨域问题,跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制

js实现cookie有效期至当次日凌晨

实际开发中有要求用户一些行为每天一次,次日开始重新回复功能,一般前端都是通过cookie来记住用户的操作,然后进行判断当日是否还有机会,这时候需要给存储的cookie值一个有效期,让次日自动失效,重新计数,代码如下:

你真的了解 Cookie 和 Session 吗?

我在做面试官的时候,曾经问过很多朋友这个问题: Cookie 和 Session 有什么区别呢?大部分的面试者应该都可以说上一两句,比如:什么是 Cookie?什么是 Session?两者的区别等。

关于cookie domain中的点前缀

浏览器已经接收指令,之前在一级域名下存储了相关的信息。这里为了简化问题,假设我们有两个应用A和B,域名分别为:a.b.com和c.a.b.com。(显然B是A的一个子域)。

jquery之cookie操作_jquery.cookie.js

定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术;下载与引入:jquery.cookie.js基于jquery;先引入jquery,再引入:jquery.cookie.js

JS中设置cookie,读取cookie,删除cookie

Cookie 是在您的计算机上存储在小的文本文件中的数据。当 web 服务器向浏览器发送网页后,连接被关闭,服务器会忘记用户的一切。Cookie 是为了解决“如何记住用户信息”而发明的:若要想修改某个cookie,只需要用此种方法

使用vue-cookies处理cookie

创建:this.$配置时候设置的名称.set(\\\'cookies的key\\\',value),获取指定的key:this.$配置时候设置的名称.get(\\\'cookies的key`),获取所有keys返回为数组的形式:this.$配置时候设置的名称.keys (\\\'cookies的key`)

使用js实现对cookie的增删改查

存储cookie(key为test;value为testValue);而在cookie的名中我们可以控制,但要保存的值是不确定的,怎么办呢?这时就需要用escape()函数进行编码,它能将一些特殊符号使用十六进制表示

Js操作Cookie

Web 服务器和 HTTP 服务器是无状态的,因此当 Web 服务器将网页发送到浏览器时,连接会被断开,服务器会忘记与用户相关的所有内容。那么浏览器和 Web 服务器是怎样记住用户信息的?cookie 被发明出来解决这个问题。

Js cookie工具函数封装

CookieUtil.get() 方法根据 cookie 的名字获取相应的值。它会在 document.cookie 字符串中查找 cookie 名加上等于号的位置。如果找到了,那么使用 indexOf() 查找该位置之后的第一个分号(表示了该 cookie 的结束位置)。如果没有找到分号

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!