首先分享一下我自己封装的设置cookie,获取cookie以及删除cookie的三个函数:
1.获取cookie
function getCookie(name) {
//获取到cookie
var cookies = document.cookie;
// 给name拼接上=
name += "=";
var arr = cookies.split("; ");
for (var i = 0; i < arr.length; i++) {
if (arr[i].indexOf(name) === 0) {
// 找到符合name的cookie
return arr[i].substr(name.length);
}
}
return "";
}
2.设置cookie
function setCookie(name, value, opt) {
opt = opt || {}
var path = opt.path || "";
path = path ? ";path=" + path : ""
var domain = opt.domain || "";
domain = domain ? ";domain=" + domain : "";
var expires = opt.expires || "";
if (expires) {
var d = new Date(Date.now() + expires * 24 * 60 * 60 * 1000).toUTCString();
expires = ";expires=" + d
}
document.cookie = name + "=" + value + path + domain + expires
}
3.删除cookie,其实就是设置一个过期时间
function removeCookie(name, opt) {
opt = opt || {}
var path = opt.path || "";
path = path ? ";path=" + path : ""
var domain = opt.domain || "";
domain = domain ? ";domain=" + domain : "";
var expires = ";expires=" + new Date(1).toUTCString()
document.cookie = name + "=" + path + domain + expires
}
但是在使用cookie的时候我发现手动设置甚至调用函数设置根本没用,研究了半天,原来cookie是基于服务器环境运行的。
只有网址是localhost:8080/index时才可以设置cookie,而我写的是file:///H:/index,因此会失效。
调用函数举例代码:
setCookie("a","1",{
path:"/",
domain:"localhost",
expires:"2"
})
下面再推荐一个基于jquery的一个cookie的处理插件----jQuery.cookie.js
网址:http://www.jq22.com/jquery-info254
使用方法:
引入
<script type="text/javascript" src="自己的jquery的地址"></script>
<script type="text/javascript" src="jquery.cookie.js的地址"></script>
//jqeury.cookie.js
//添加:
$.cookie('the_cookie', 'the_value');
//添加一个cookie并设置7天的有效期
$.cookie('the_cookie', 'the_value', { expires: 7 });
// 读取:
$.cookie('the_cookie')
//删除:
$.removeCookie("the_cookie");
$.cookie('the_cookie', null);
cookie和storage的区别有以下几点:
共同点:都是保存在浏览器端,且同源的。
区别:
- 与服务器的数据交换方式不同。 cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
- 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
- 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
- 作用域不同,sessionStorage、localStorage不在不同的浏览器窗口中共享,即使是同一个页面;cookie也是在所有同源窗口中都是共享的。