JavaScript操作Cookie——基础篇

简介: JavaScript操作Cookie——基础篇

引言


最近在项目中需要用到cookie来区分UV和PV的数量,之前都是在在后台方法中利用c#操作cookie,而这次根据需求需要在js中操作cookie,当时遇到这个问题的时候感觉是比较简单的,所以就查了一下资料就完成了,但是当系统进入测试环境以后cookie中的值在后台方法中就拿不到了,通过监视发现在http请求的头部信息中没有cookie的值,但是在本地是没有问题的,通过对比路径判断应该是cookie的路径或者是跨域出现了问题,就这个问题正好总结一下cookie的基本知识。


Cookie简介


“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。” cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息。


从JavaScript的角度看,cookie 就是一些字符串信息。这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息。


在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信,所以除了JavaScript以外,服务端的语言(如c#)也可以存取 cookie。


Cookie 的常见问题


•cookie 存在两种类型:


•你浏览的当前网站本身设置的 cookie


•来自在网页上嵌入广告或图片等其他域来源的 第三方 cookie (网站可通过使用这些 cookie 跟踪你的使用信息)


•刚刚基础知识里面有说到 cookie 生命周期的问题,其实 cookie 大致可分为两种状态:


•临时性质的cookie。当前使用的过程中网站会储存一些你的个人信息,当浏览器关闭后这些信息也会从计算机中删除


•设置失效时间的cookie。就算浏览器关闭了,这些信息业依然会在计算机中。如 登录名称和密码,这样无须在每次到特定站点时都进行登录。这种cookie 可在计算机中保留几天、几个月甚至几年


•cookie 有两种清除方式



•通过浏览器工具清除 cookie (有第三方的工具,浏览器自身也有这种功能)


•通过设置 cookie 的有效期来清除 cookie


•注:删除 cookie 有时可能导致某些网页无法正常运行


•浏览器可以通过设置来接受和拒绝访问 cookie。



•出于功能和性能的原因考虑,建议尽量降低 cookie 的使用数量,并且要尽量使用小 cookie。


•关于cookie编码的细节问题将会在cookie高级篇中单独介绍。


•假如是本地磁盘中的页面,chrome的控制台是无法用JavaScript读写操作 cookie 的,解决办法...换一个浏览器^_^。


Cookie的基础用法


一、简单存取操作


在使用JavaScript存取 cookie 时,必须要使用Document对象的 cookie 属性;一行代码介绍如何创建和修改一个 cookie :


<span style="font-family:SimSun;font-size:18px;">document.cookie  = 'username=zhenghao'</span>


以上代码中'username'表示 cookie 名称,'zhenghao'表示这个名称对应的值。假设 cookie 名称并不存在,那么就是创建一个新的 cookie;如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ,重复使用这个方法即可。


二 cookie的读取操作

<span style="font-family:SimSun;font-size:18px;">function getRandomNum() {
        var arr = document.cookie.match(new RegExp("(^| )" + "statisticssCookie=([^;]*)(;|$)"));
        if (arr != null) {
            return arr[2];
        } else {
            var tempRandomNum = guid();//生成类似guid格式的函数
            document.cookie = "statisticssCookie = " + tempRandomNum;
            return tempRandomNum;
        }
    }
</span>

读取cookie的方法还有很多,广大读者可以自己查阅一些资料,在这就不一一解释了。


三、设置cookie的有效期


文章中常常出现的 cookie 的生命周期也就是有效期和失效期,即 cookie 的存在时间。在默认的情况下,cookie 会在浏览器关闭的时候自动清除,但是我们可以通过expires来设置 cookie 的有效期。语法如下:

<span style="font-family:SimSun;font-size:18px;">document.cookie = "name=value;expires=date"</span>


上面代码中的date值为GMT(格林威治时间)格式的日期型字符串,生成方式如下:


<span style="font-family:SimSun;font-size:18px;">var _date = new Date();
  _date.setDate(_date.getDate()+30);
  _date.toGMTString();</span>


上面三行代码分解为几步来看:


•通过new生成一个Date的实例,得到当前的时间;


•getDate()方法得到当前本地月份中的某一天,接着加上30就是我希望这个cookie能过在本地保存30天;


•接着通过setDate()方法来设置时间;


•最后 用toGMTString()方法把Date对象转换为字符串,并返回结果


通过下面这个完整的函数来说明在创建 cookie 的过程中我们需要注意的地方 - 从w3school复制下来的。创建一个在 cookie 中存储信息的函数:

<span style="font-family:SimSun;font-size:18px;">function setCookie(c_name, value, expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
  }
  使用方法:setCookie('username','Darren',30)</span>


现在我们这个函数是按照天数来设置cookie的有效时间,如果想以其他单位(如:小时)来设置,那么改变第三行代码即可:


<span style="font-family:SimSun;font-size:18px;">exdate.setHours(exdate.getHours() + expiredays);</span>

小结


之前只是知道cookie这个东西是做浏览器缓存来使用,但是对于这个知识点更细致的理解没有,所以在项目中用到的时候不能灵活运用,因为对这个东西不是很熟所以在使用的过程中不知道存在什么样的问题,更不知道应该如何来避免,所以我们在学习知识的时候需要了解的多一些,在下一篇博客张会讲解一些高级的知识,像cookie路径、跨域问题等。


目录
相关文章
|
存储 JavaScript 前端开发
JavaScript Cookie
JavaScript Cookie
188 0
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
306 9
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
149 1
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
170 1
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
715 1
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
158 5
|
存储 前端开发 JavaScript
回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。
【6月更文挑战第27天】回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。它作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,模拟异步操作后,调用`handleResult`传递结果。这样,当异步任务完成时,`handleResult`负责处理结果。
172 1
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
210 2
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
974 0
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
150 0