JavaScript cookie详解及简单实例应用

JavaScript cookie详解

一、cookie基本介绍

cookie是document的对象。cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据，并且能够获得以这种方式存储的数据。cookie还可以用于客户端脚本化。

cookie数据可以自动地在Web浏览器好Web服务器之间传递。

在浏览器中可以通过navigator.cookieEnabled属性检查浏览器的cookie功能是否被激活。

    二、cookie的基本属性    

每个cookie都有四个可选的属性

1.expires

指定了cookie的生存期。将expires属性设定为未来的一个过期时间，即可让cookie在过期后失效。

现在用max-age属性来代替它，max-age用秒来设置cookie的生命期。一旦超过了max-age的生命期，那个cookie就会被浏览器自动地从cookie文件中删除掉

2.path

指定了与cookie关联在一起的网页。默认情况下，cookie会和创建它的网页以及与这个网页处于同一个目录下的网页和处于该目录的子目录下的网页关联。

这个主要设置了cookie对于网页的可见性。加入将path设置为www.a.com/list，那么www.a.com/list/a.html和www.a.com/list/b.html都可以访问cookie，但www.a.com/comtain不  能访问该cookie。但是如果将path设置为www.a.com/，那么www.a.com/list和www.a.com/contain都可以访问cookie。

3.domain

默认只有来自同一Web服务器的页面才能访问cookie，可以设置domain。例如把cookie的path设定为/，cookie设定为.example.com，则所有位于catalog.example.com和    orders.example.com的网页以及位于.example.com域名下其他服务器的网页都能访问这个cookie

注意：不能讲一个cookie的域设置为服务器所在的域之外的域

4.source

source为一个布尔值，true由不安全的HTTP传输（默认）；false只在浏览器和服务器通过HTTPS或其他的安全协议连接下才被传输。

    三、cookie的应用

一个cookie是一个字符串，有name=value这种结构组合而成。cookie的例子：

version=1.0;max-age=3600

注意每段字符串之间不能包含逗号或者空格等，因此在写入cookie时需要使用encodeURIComponent去掉变量中的相关符号，读取时利用的decodeURIComponent

要创建一个能够持续存在一年的cookie：

document.cookie = “version=” + document.lastModified + “;max-age=” + (60*60*24*365);

    四、总结

虽然现在浏览器的存储技术越来越多，HTML5也为localStorage带来了更高的性能体验，但是cookie仍然可以为我们处理很多事务，方便小型数据的交流。合理的使用cookie，可以让我们的应用程序更加灵活。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • AngularJS入门教程之Cookies读写操作示例

    AngularJS入门教程之Cookies读写操作示例

    本文实例讲述了AngularJS的Cookies读写操作.分享给大家供大家参考,具体如下: 虽然使用JavaScript创建和获取Cookie很简单,AngularJS还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookies.js: <script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"><

  • node.js cookie-parser 中间件介绍

    之前加入了一个学习笔记本群,通过学习笔记来分享学习成果.也在这里发一份吧. 当我们在写web的时候,难免会要使用到cookie,由于node.js有了express这个web框架,我们就可以方便地去建站.在使用express时,经常会使用到cookie-parser这个插件.今天我们来分析一下这个插件. 这个插件通常当作中间件使用,app.use(cookieParser()), 这样就可以处理每一个请求的cookie. 从名字上看,这就是一个解释Cookie的工具.通过req.cookies可

  • JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面

    简单写了写,可根据指定参数Deadline格式的时间进行测试,如存在些不严谨的地方还请指出. // 设置cookie在当天指定时间点过期并提示 function setCookie(name,value,Deadline,callback){ // 获取当前日期对象 var curDate = new Date(); // 获取当前日期对应的时间戳 var curTime = curDate.getTime(); // 获取指定时间的时间戳 var endTime = convertTime(c

  • js基于cookie方式记住返回页面用法示例

    本文实例讲述了js基于cookie方式记住返回页面的用法.分享给大家供大家参考,具体如下: 首先明确以下概念 ①. 同名的 cookie,不同的 domain 或不同的 path,属不同的 cookie: 同名的 cookie,相同的 domain 且相同的 path,不同的 expires,属同一个 cookie. ②. 不加过期时间的cookie在浏览器关闭后失效 ③ 二级域名cookie可以生效,通过指定domain 于是在js端 document.cookie="back_url=&qu

  • javascript操作cookie

    前端js cookie的使用 cookie的作用:服务器可以利用Cookies包含信息的任意性来筛选并经常性维护这些信息,以判断在HTTP传输中的状态.Cookies最典型的应用是判定注册用户是否已 经登录网站,用户可能会得到提示,是否在下一次进入此网站时保留用户信息以便简化登录手续,这些都是Cookies的功用.另一个重要应用场合是"购物 车"之类处理.用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品,这些信息都会写入Cookies,以便在最后付款时提取信息. js设置c

  • JavaScript数据存储 Cookie篇

    1.什么是cookie?     答:cookie是用于在客户端存储会话信息的. 2.cookie的组成部分?     ①名称:一个唯一确定cookie 的名称.建议区分大小写.cookie 的名称必须是经过URL 编码的.     ②值:储存在cookie 中的字符串值.值必须被URL 编码.     ③域:cookie 对于哪个域是有效的.所有向该域发送的请求中都会包含这个cookie 信息.这个值可以包含子域(subdomain,如www.wrox.com),也可以不包含它(如.wrox.

  • js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"); Cookie password = new Cookie("password ","cookievalue&quo

  • JS中对Cookie的操作详解

    JS中对Cookie的操作详解

    前言 cookie设置 参数说明: name cookie 名称,key值 value 可选,cookie 值 expire 可选,过期时间,时间戳格式 path 可选,服务器端有效路径,/ 表示整个域名有效,默认为当前设置 cookie 时页面的路径 domain 可选,该 cookie 有效的域名 secure 可选.规定是否通过安全的 HTTPS 连接来传输 cookie. 代码的封装 (function(){ var cookieObj={ 'add':function(name, va

  • sso跨域写cookie的一段js脚本(推荐)

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> var setcookitarray = ""; setcookitarray = "[\"http://passport.a.com/main/setCookie.do?domain=\",\"http://passport.

  • JS使用cookie设置样式的方法

    本文实例讲述了JS使用cookie设置样式的方法.分享给大家供大家参考,具体如下: var styleShow = ["blackgreen", "purple"]; var path = "/"; var StyleSwitch = { //设置样式 setStyleSheet: function (StyleName) { var i, a, main; for (i = 0; (a = document.getElementsByTagNa

随机推荐