久久都不明白的cookie

前言

平时很少操作cookie, 对cookie这块有一定的误区，所以现在来好好学习一下cookie，其实之前还是看多比较多的关于cookie的文章，也有觉得好的，但是感觉还是差了点东西吗但是看了《javaScript权威之南》之后，就感觉明确多了。

背景

其实关于cookie最早是设计为被服务器所用的，从最底层来看, 作为http协议的一种扩展实现它。 cookie数据会自动在web浏览器和服务器之间传输，因此服务器脚本就可以读写存储在客户端的cookie值。

结果cookie在之间就被滥用为客户端存储数据的作用。虽然这样大好，但是还是需要来说说客户端怎样实现cookie的操作的（增删查改）。

javaScript操作cookie

获取cookie
cookie可以通过Document对象的cookie属性来获取。但是只能获取能获取到的全部cookie（如果cookie有httponly，就不能获取到）。所以如果想要单独获取某一个cookie的值，就需要处理所有cookie的字符串，然后得到某一个cookie的值。
增加cookie
使用document.cookie = “key=value”这样就可以成功的存入一个cookie值，我们应该知道cookie是有其他属性的，例如：访问路径，有效时间等。那么该怎样设置呢？由于cookie的名?值中的值是不允许包含分号，逗号，和空白符，因为不能简答的使用document.cookie = “key=value;path=path;max-age=number”;，如果这做，会相当于key=value。因此，在存储前一般可以采用javaScript核心的全局函数encodeURIComponent()对其编码。例如：document.cookie=”key=”+encodeURIComponent(value)+”;max-age=number;path=path”;这样就可以设置key并且设置它的属性值。
删除一个cookie
删除cookie需要通过设置有效时间来完成。例如需要删除key这个cookie,那么需要设置cookie的max-age = 0；来完成。
4 . 改变一个cookie
只需要重新设置一个相同的cookie名覆盖即可，同时需要赋予其他属性。

以上便是cookie的增删查改的思路，以下是具体的代码实现

//获取cookie的对象表示。
var getCookie = function(){
    var cookie = {}
    var all = document.cookie
    if(all = ""){
        return cookie
    }
    var list = all.split("; ")
    for(var i = 0; i < list.length; i++){
        var cookie = list[i]
        var p = cookie.indexOf("=")
        var name = cookie.substring(0, p)
        var value = cookie.substring(p+1)
        value = decodeURIComponent(value)
        cookie[name] = value
   }
   return cookie
}

//保存cookie值
var setCookie = function(name, value, expiretion){
    var cookie = name+"="+encodeURIComponent(val)
    if(expiretion){
        cookie+=";max-age="+expiretion
    }
    document.cookie = cookie
}

//删除cookie;如果该cookie不存在也没有影响
var deleteCookie = function(name){
    var cookie = getCookie()
    document.cookie = name +"= "+encodeURIComponent("")+";max-age=0";
}
//改一个cookie 无法获取原来的cookie的属性 ， 所以需要自己确定其他属性。例如max-age。否则改了的cookie将会是无效

var updataCookie = function(name,newValue, maxAge){
    document.cookie = name+"="+encodeURIComponent(newValue)+";max-age="+maxAge;
}

结尾

没有

久久都不明白的cookie

前言

背景

javaScript操作cookie

结尾

猜你喜欢