JavaScript cookie详解及简单实例应用


Posted in Javascript onDecember 31, 2016

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,可以让我们的应用程序更加灵活。

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

Javascript 相关文章推荐
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
javascript 用函数实现继承详解
May 28 Javascript
JavaScript & jQuery完美判断图片是否加载完毕
Jan 08 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 #Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 #Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 #Javascript
angularjs中ng-attr的用法详解
Dec 31 #Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 #Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 #Javascript
Javascript 实现全屏滚动实例代码
Dec 31 #Javascript
You might like
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
VBScript版代码高亮
2006/06/26 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
javascript常用方法汇总
2014/12/02 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
python实现从字典中删除元素的方法
2015/05/04 Python
Python语言快速上手学习方法
2018/12/14 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
python3中rank函数的用法
2019/11/27 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
简单而又朴实的个人求职信分享
2013/12/12 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
政审证明范文
2015/06/19 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书