JS中设置cookie,读取cookie,删除cookie
在开发时,碰到一个需求,需要保存一个表的信息(非隐私),希望下次打开还存在。于是想到用cookie,一番折腾完成。示例数据都是假的,打马赛克是怕泄密。
这个表取名为Data,为Array,每一行是一个Object:
1.什么是cookie?
Cookie 是在您的计算机上存储在小的文本文件中的数据。当 web 服务器向浏览器发送网页后,连接被关闭,服务器会忘记用户的一切。Cookie 是为了解决“如何记住用户信息”而发明的:
- 当用户访问网页时,他的名字可以存储在 cookie 中。
- 下次用户访问该页面时,cookie 会“记住”他的名字。
Cookie 保存在名称值(name-value)对中,加上分号空格隔开,如:
"name1=value1; name2=value2; name3=value3"
当浏览器从服务器请求一个网页时,将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息,需要浏览器开启本地 cookie 支持。
你可以在chrome浏览器中点击这里查看此某网站所有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链接传输
如下示例,许多属性是可以被省略的。注意,如果网页比较复杂,省略了path或者domain,可能导致设置删除会麻烦一些,因为找不到这个cookie。下图的cnblogs.com等就是域名。
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);
}
};
若要想修改某个cookie,只需要用此种方法,给定此cookie的name值,写入新的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链接传输
JS中设置cookie,读取cookie,删除cookie的更多相关文章
- 设置、读取、删除cookie
刚才用虚拟机当服务器,开了两个服务(端口号不同),发现同样的cookie:在别的网站下面没有发现该cookie.说明cookie只是对应相应的网站的(自己得出的结论) ---------------- ...
- PHP中设置、使用、删除Cookie方法
1.设置Cookie PHP用SetCookie函数来设置Cookie.必须注意的一点是:Cookie是HTTP协议头的一部分,用于浏览器和服务器之间传递信息,所以必须在任何属于HTML文件本身的内容 ...
- js设置、读取、删除cookie
设置cookie: function setCookie(oJson , time){ var data = new Date( new Date().getTime() + time*24*60*6 ...
- JS读写Cookie(设置、读取、删除)
JS读写Cookie(设置.读取.删除) Cookie是客户端存放数据的一种方式,可用来做状态保持. 1.设置Cookie: a.无过期时间:(若不设置过期时间,默认为会话级Cookie,浏览器关闭就 ...
- 什么是cookie?cookie的使用(设置,读取,删除)
1.什么是cookie? 页面用来保存信息 比如:自动登录,记住用户名 cookie的特性 同一个网站所有页面共用一套cookie ...
- 遇到问题-----JS中设置window.location.href跳转无效(在a标签里或这form表单里)
问题情况 JS中设置window.location.href跳转无效 代码如下: ? 1 2 3 4 5 6 7 8 <script type="text/javascript&quo ...
- 如何HTML标签和JS中设置CSS3 var变量
一.HTML标签中设置CSS变量 如下: <div style="--color: #cd0000;"> <img src="mm.jpg" ...
- 2.在程序中如何实现Cookie信息的设置,读取和删除
设置:你可以在IE的“工具/Internet选项”的“常规”选项卡中,选择“设置/查看文件”,查看所有保存到你电脑里的Cookies.这些文件通常是以user@domain格式命名的,user是你的本 ...
- JS 浏览器cookie的设置,读取,删除
JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一 ...
随机推荐
- Spring Boot自动配置总结
Spring Boot项目启动的时候加载主配置类,并开启了自动配置功能.(Spring Boot的自动配置功能是Spring Boot的一大重要且突出的特性) 那么我们需要了解下它: 如何加载主配置类 ...
- 下载 Eclipse 免安装版~
进入https://www.eclipse.org/downloads/
- redis windows相关操作笔记
设置远程访问 1.注释掉bind 127.0.0.1. 2.protected-mode属性从yes改为no. 启动redis服务:redis-server.exe redis.windows.con ...
- ArrayList知识详解
简介 ArrayList是Java集合常用的数据结构之一,继承自AbstractList,实现了List,RandomAccess.Cloneable.Serializable等一系列接口,支持快速访 ...
- 通过三层交换机实现不同VLAN间的通信(案例+Cisco模拟器配置)
如图,其中PC1和4位于销售部VLAN10,PC2和PC5位于市场部VLAN20,PC3和PC5位于财务部VLAN30,各主机的IP地址以及子网掩码已列出,下面将讲解如何配置利用三层交换机来实现不同V ...
- 将临时全局表中的符合字段导入test数据库中
--表1 开户级别表 insert into test.dbo.crm_m_cust_summary(CUST_CERT_N O,ASSETAMT_GRADE_CD)select cust_no,cu ...
- json格式字符串转字典
//json格式字符串转字典+ (NSDictionary *)dictionaryWithJsonString:(NSString *)jsonString { if (jsonStr ...
- 微信支付-无法识别qrcode生成的二维码图片
1.开始使用 table方式,但是还是无法识别二维码 http://www.cnblogs.com/staticed/p/8549316.html var code_url = data.code_ ...
- 【curl】cookie的分隔符
cookie是以分号作为分隔符的. ex: curl --silent -H "Host: xxx.com" "172.172.178.9:80/item/comm?pi ...
- PHP 字符串相关常识
0x00 前言 第一次遇见字符串这个概念是在学 C 语言的时候,那时候觉得字符串也没有什么难的,不就是一个以 \0 结尾的 char 数组而已咯.后来在学习 PHP 的过程中也同样保持这个观念,不过在 ...