javascript读写cookie

简介:   这篇介绍javascript里面读写cookie的方法。这个方法不是自己写的,大家都知道,做东西的时候很少自己去写底层的东西,但不写一定要去了解,要不然出了问题就不知所云了。了解这些方法可以分步来了解: document.cookie:不要把这个想的很复杂,其实就是一个用“; ”分隔(注意是一个分号和一个空格)的成对的name1=value1;name2=value2... ...字符串,w3c上这样解释它:该属性是一个可读可写的字符串,可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。

  这篇介绍javascript里面读写cookie的方法。这个方法不是自己写的,大家都知道,做东西的时候很少自己去写底层的东西,但不写一定要去了解,要不然出了问题就不知所云了。了解这些方法可以分步来了解:

document.cookie:不要把这个想的很复杂,其实就是一个用“; ”分隔(注意是一个分号和一个空格)的成对的name1=value1;name2=value2... ...字符串,w3c上这样解释它:该属性是一个可读可写的字符串,可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。
下面的3个方法都是围绕着这个对象来进行的。如果你使用的是火狐浏览器且安装了firebug插件且安装了firecookie插件,现在可以点击Cookies标签查看,如下图1

图1

    这里我们看到的并不是一个字符串,是因为为了显示方便firecookie将他们做了分隔。我们可以点击控制台标签,在右方命令编辑器中输入document.cookie,点击运行,在左方的输出中皆可以看到cookie的值了,如图2中的红色字体。顺便说一下firebug超级方便,在控制台中可以运行命令行,也可以运行多行命令,在最右下方有一个红色的小按钮,可以在两种方式之间相互切换。

图2

    下面接着看这个方法,它其实就是在上面的字符串中找到“__utma=”这样的一个字符串的位置,然后从“=”后面开始计算,找到分隔符“;”然后截取他,就是这个cookie项的值了。这里解释一下几个关键变量:

arg:是类似于"__utma"这样一个字符串,也就是查找要查找的cookie的名字加上一个"="

alen:是上面cookie名字加上“=”的字符串长度

clen:是整个cookie字符串的长度

i:初始值为0,每次循环时设置成当前位置加上alen,当前位置就是从name开始的位置

j:初始值为0,每次循环时设置成value结束的位置

stringObject.substring(start,stop):
start     必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
stop     可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多1。如果省略该参数,那么返回的子串会一直到字符串的结尾。

stringObject.indexOf(searchvalue,fromindex):
searchvalue     必需。规定需检索的字符串值。
fromindex     可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。

    以上是getcookie方法的逻辑,下面是setCookie,注意这里的setcookie并没有修改整个cookie字符串的值,而是新添加一个cookie,这个方法没有什么逻辑,但是要注意里面的参数,要不然会带来很多的问题,下面一一列举。

name:要设置的cookie的名字
expires:cookie的过期时间,如果没有这个参数的话,注意这里要使用格林威治时间,没有给给出这个参数,就不会保存到硬盘中而是内存中,这样上面的过期时间就不会显示,而是显示成会话,如下图3
path:这个参数表示cookie保存的路径,如果没有给出的话会保存为当前站点的,如果给出值"/"的话会保存到当前虚拟目录,如图3,前面两个保存在当前站点,后面两个保存在当前站点下不同的虚拟目录下
domain:这个参数有点类似于session的保存路径,默认情况下保存在当前客户端,也可以保存在其他有写权限的机器上,本人暂时没有用到
secure:这个参数应该和安全有关,也没有用到,因为一般保存到cookie数据都是一些搜索历史之类的

图3
  

  注意这里我们使用escape和unescape对cookie的值进行编码和解码。

escape(string):escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / 。其他所有的字符都会被转义序列替换。
unescape(string) :unescape() 函数可对通过 escape() 编码的字符串进行解码。该函数的工作原理是这样的:通过找到形式为 %xx 和 %uxxxx 的字符序列(x 表示十六进制的数字),用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码。

    这里说个题外话,我们知道session和cookie关系密切,每个session都有一个sessionid,这个sessionid也是保存在cookie中,名字叫ASP.NET_SessionId,见图3,我们可以看到这是一个会话cookie,并不是保存在硬盘中,没有过期时间,所以一段关闭浏览器,session就消失了,再打开浏览器的时候就找不到session值了,就是因为这个sessionid丢失了。如果将用户登陆账号保存在session中,关闭浏览器登录状态就会消失,需要重新登录,就是这个原因。

    最后看一下这两个函数的原型。

// utility function called by getCookie()
function getCookieVal(offset) {
    var endstr = document.cookie.indexOf(";", offset);
    if (endstr == -1) {
        endstr = document.cookie.length;
    }
    return unescape(document.cookie.substring(offset, endstr));
}

// primary function to retrieve cookie by name
function getCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg) {
            return getCookieVal(j);
        }
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
    }
    return null;
}

// store cookie value with optional details as needed
function setCookie(name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}

// remove the cookie by setting ancient expiration date
function deleteCookie(name, path, domain) {
    if (getCookie(name)) {
        document.cookie = name + "=" +
      ((path) ? "; path=" + path : "") +
      ((domain) ? "; domain=" + domain : "") +
      "; expires=Thu, 01-Jan-1970 00:00:01 GMT";

    }
}

 

// utility function called by getCookie()
function getCookieVal(offset) {
    var endstr = document.cookie.indexOf(";", offset);
    if (endstr == -1) {
        endstr = document.cookie.length;
    }
    return unescape(document.cookie.substring(offset, endstr));
}

// primary function to retrieve cookie by name
function getCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg) {
            return getCookieVal(j);
        }
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
    }
    return null;
}

// store cookie value with optional details as needed
function setCookie(name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}

// remove the cookie by setting ancient expiration date
function deleteCookie(name, path, domain) {
    if (getCookie(name)) {
        document.cookie = name + "=" +
      ((path) ? "; path=" + path : "") +
      ((domain) ? "; domain=" + domain : "") +
      "; expires=Thu, 01-Jan-1970 00:00:01 GMT";

    }
}

 

作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址williamningdong@gmail.com  联系我,非常感谢。

目录
相关文章
|
存储 JSON 安全
Gin 学习之 cookie 读写
Gin 学习之 cookie 读写
69 0
|
6月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
|
5月前
|
JSON 前端开发 JavaScript
在JavaScript中,异步编程是一种处理非阻塞操作(如网络请求、文件读写等)的重要技术
【6月更文挑战第12天】JavaScript中的异步编程通过Promise和async/await处理非阻塞操作。Promise管理异步操作的三种状态,防止回调地狱,支持链式调用和并行处理。async/await是ES8引入的语法糖,使异步代码更像同步代码,提高可读性。两者结合使用能更高效地处理复杂异步场景。
38 3
|
6月前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
44 3
|
1月前
|
存储 JavaScript 前端开发
JavaScript Cookie
JavaScript Cookie
15 0
|
3月前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
63 9
|
4月前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
199 0
|
4月前
|
存储 Web App开发 移动开发
js【详解】本地存储 Cookie、sessionStorage、localStorage
js【详解】本地存储 Cookie、sessionStorage、localStorage
135 0
|
6月前
|
JavaScript 前端开发
node.js中的fs模块,读写语法讲解
node.js中的fs模块,读写语法讲解
|
5月前
|
JavaScript 前端开发 数据安全/隐私保护
JS中使用Cookie实现记住密码以及设置密码过期时间
JS中使用Cookie实现记住密码以及设置密码过期时间
93 0