-
cookie : 存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来像访问者电脑上存储数据
- 不同的浏览器存放的cookie位置不一样,也是不能通用的
- cookie的存储是以域名形式进行区分的
- cookie的数据可以设置名字的
- 一个域名下存放的cookie的个数是有限制的,不同的浏览器存放的个数不一样
- 每个cookie存放的内容大小也是有限制的,不同的浏览器存放大小不一样
我们通过document.cookie来获取当前网站下的cookie的时候,得到的字符串形式的值,他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来
如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间
cookie默认是临时存储的,当浏览器关闭进程的时候自动销毁
<script>
/**
* coolie的设置与调用
*/
document.cookie = "username='小明'"
document.cookie = "age='15'"
console.log(document.cookie) //返回的是一个字符串形式的数据
/**
* 设置cookie保存时间
*/
var oDate = new Date()
oDate.setDate(oDate.getDate() + 7) //设置保存的时间
//由于cookie保存的是字符串格式的时间,所以进行转换;oDate.toCMTString()不赞成使用,并且由oDate.toUTCString()取代,所以返回的格式和内容均相同
document.cookie = "username='小红';expires=" + oDate.toUTCString()
/**
* 关于编码
*/
// document.cookie = "username='小明\n123'" 无法识别\n所以最好进行编码操作
document.cookie = "username=" + encodeURI('小刚\n123') //encodeURI进行编码
console.log(decodeURI(document.cookie) //decodeURI进行解码
/**
* 创建保存cookie组件,方便调用:
*/
function Cookie() {
}
Cookie.prototype = {
setCookie: function (key, value, t) {
var oDate = new Date()
oDate.setDate(oDate.getDate() + t)
document.cookie = key + "=" + encodeURI(value) + ";expires" + oDate.toUTCString()
},
getCookie: function (key) {
var arr = document.cookie.split("; ")
return this.formatData(arr, key)
},
removeCookie: function (key, value, t) {
this.setCookie(key, value, t)
},
formatData: function (arr, key) {
var prev
var _this = this
arr.forEach(function (item, idx) {
var arr = item.split("=")
if (arr[0] === key) {
// console.log("arr[1]:",decodeURI(arr[1]))
prev = decodeURI(arr[1])
}
})
return prev
}
}
var c = new Cookie()
c.setCookie("username", "小明", 5)
console.log(c.getCookie("username"))
c.removeCookie("username", "", -1)
console.log("remove:", c.getCookie("username"))
</script>