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

更新日期: 2019-07-19阅读: 2.5k标签: cookie

1.什么是cookie?

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

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

Cookie 保存在名称值(name-value)对中,加上分号空格隔开,如:

"name1=value1; name2=value2; name3=value3"

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


2.cookie设置的语法

document.cookie = "cookieName=something; expires=Fri Aug 16 2019 10:08:34 GMT+0800; path=/dir;domain=myblog.com; max-age=3600; secure=true";

cookieName=something :name=value,cookie的名称和值

expires=Fri, 31 Dec 2017 15:59:59 GMT: expires,cookie过期的日期,如果没有定义,cookie会在对话结束时过期。日期格式为 new Date().toUTCString()

path=/dir: path=path (例如 '/', '/dir') 如果没有定义,默认为当前文档位置的路径。

domain=myblog.com: 指定域(例如 'example.com', '.example.com' (包括所有子域名), 'subdomain.example.com') 如果没有定义,默认为当前文档位置的路径的域名部分。

max-age=3600: 文档被查看后cookie过期时间,单位为秒

secure=true: cookie只会被https传输 ,即加密的https链接传输


3.设置cookie

function setCookie (name, value, day) 
{
      if(day !== 0){     //当设置的时间等于0时,不设置expires属性,cookie在浏览器关闭后删除
        var expires = day * 24 * 60 * 60 * 1000;
        var date = new Date(+new Date()+expires);
        document.cookie = name + "=" + escape(value) + ";expires=" + date.toUTCString();
      }else{
        document.cookie = name + "=" + escape(value);
      }
    };


4.读取cookie

function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
cookie获取正则解析:
"(^| )" + name + "=([^;]*)(;|$)"
(^| )匹配cookie开头或空格(cookie键值对之间用分号空格隔开),也就是cookie键值对的开始;
接着是cookie的名称name,([^;]*)匹配除分号以外的任意字符,也就是cookie键值对的值;
最后(;|$)匹配分号或整个cookie的结尾,也就是cooke键值对的结尾。


5.删除cookie

function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

删除某个cookie,只需要把它的过期时间调到某个之前的时间就可(减去1)。其实并没有删除,在浏览器里可以看到它,既然到期不能用了那也是实际意义上的删除。

参数解释:

/*
     * @param name cookie的名称
     * @param value cookie的值
     * @param day cookie的过期时间
*/


5.本例实现

设置:

setCookie () { // 设置cookie
      let tempStr = ''
      for (let i = 0; i < this.Data.length; i++) { // 将每一行转换为字符串后拼接
        tempStr = tempStr + JSON.stringify(this.Data[i]) + '#'
      }
      let date = new Date()
      date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000))// 设置30天过期
      let expires = 'expires=' + date.toGMTString()
      document.cookie = 'DataTableCookie=' + encodeURIComponent(tempStr) + ';' + expires + ';path=/'
},


获取:

getCookie () { // 获得cookie
      let decodedCookie = decodeURIComponent(document.cookie)
      let decodedArr = decodedCookie.split(';')[0].split('=')[1].split('#')
      decodedArr.pop()// 去掉最后一个''
      for (let i = 0; i < decodedArr.length; i++) {
        this.Data.push(JSON.parse(decodedArr[i]))
      }
},


删除:

delCookie () { // 删除cookie
      let expires = new Date()
      expires.setTime(expires.getTime() - 1)
      let currentCookie = document.cookie
      if (currentCookie != null) {
        document.cookie = 'DataTableCookie=' + currentCookie + ';expires=' + expires.toGMTString()
      }
},


cookie设置语法:

document.cookie = "cookieName=mader; expires=Fri, 31 Dec 2017 15:59:59 GMT; path=/dir;domain=myblog.com; max-age=3600; secure=true";

  • cookieName=mader :name=value,cookie的名称和值
  •  expires=Fri, 31 Dec 2017 15:59:59 GMT: expires,cookie过期的日期,如果没有定义,cookie会在对话结束时过期。日期格式为 new Date().toUTCString()
  •  path=/dir: path=path (例如 '/', '/dir') 如果没有定义,默认为当前文档位置的路径。
  •  domain=myblog.com: 指定域(例如 'example.com', '.example.com' (包括所有子域名), 'subdomain.example.com') 如果没有定义,默认为当前文档位置的路径的域名部分。
  •  max-age=3600: 文档被查看后cookie过期时间,单位为秒
  •  secure=true: cookie只会被https传输 ,即加密的https链接传输


链接: https://fly63.com/article/detial/4807

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

使用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 的结束位置)。如果没有找到分号

使用vue-cookies操作cookie

在vue中如果想要操作cookie,除了使用之前我们自己封装好的操作cookie的方法之外,我们还可以使用vue-cookies插件,这是一个简单的Vue.js插件,专门用于在vue中处理浏览器的cookie操作

点击更多...

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