js基础篇——cookie使用要点
1.Cookie
数量和长度的限制。各个浏览器的限制不同IE7+和Firefox最大限制为50条,chrome和Safari无限制,IE6-最大限制20条。且所有浏览器限制每个cookie长度不能超过4KB,否则会被截掉。
所以:现代浏览器cookie个数不要超过50条,大小不能超过4KB;简而精。
2.安全性问题。客服端每次访问服务端都会携带cookie,cookie容易被人拦截,所有的session信息被公开。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。
所以:cookie不要保存机密信息,让服务端来确保用户信息安全。
3.关于cookie的编码。原来的cookie编码大多使用escape和unescape进行编解码,这个编解码针对普通字母和数字以及*,+,-,.,/,@,_以外的其他字符,可以说是比较简单粗暴的。后来ECMAScript v3 已从标准中删除了escape进行编码,分解成了encodeURI(针对URL风格进行编码)和 encodeURIComponent(针对URL风格编码加上URI 组件的标点符号进行编码,比encodeURI要编码的字符更多)。一般来说cookie编码只需要能对"="和";"进行编码即可。
所以在不能使用escape的情况下使用encodeURIComponent编码,decodeURIComponent解码。
4.cookie每次随HTTP请求一起发送,浪费宽带,移动端推荐使用localStorage。
5.使用方法
document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value)
每执行一次上面的代码就会添加一个cookie,如果cookie中已经存在相同name的cookie则完全覆盖(这里的覆盖不仅仅只value值的覆盖,指的是覆盖一切当前name对应的cookie信息,比如失效时间expires属性、path属性等等)。
一次只能添加一个cookie,除了第一个key/value对被认为是cookie值保存外,其他key/value对被认为是该cookie的属性。比如
document.cookie = "name=chua;expires="+(new Date("2016/1/6 11:44:30")).toGMTString();
上面的代码被解释为cookie name在2016/1/6 11:44:30到期的
document.cookie = "name=chua;age=12";
上面的代码解释为添加了一个cookie name=chua。这个cookie有一个属性age=12。但是很明显,age在cookie中没有意义。因为cookie除了本身的键和值能获取到,他相关的属性无法读取,只有浏览器知道。
现在来说说cookie的几个属性(不详细讲,主要是使用的注意事项):
expires:绝对失效时间,时间格式只支持GTM标准时间,所有浏览器都支持
默认情况下cookie是暂时存在的,他们存储的值只在浏览器会话期间存在,当用户退出浏览器后这些值也会丢失;如果指定 expires 值,那么如果在时间没有过期的情况下cookie始终存在,即使关闭浏览器、关闭电脑。例子
document.cookie = "name=chua;expires="+(new Date("2016/1/6 11:44:30")).toGMTString();
max-age:相对失效时间,格式是数字,单位秒
说是expires现在已经被max-age属性所取代,但是实际上本人测试至少IE是不支持max-age的。所以,max-age的使用范围就只能说抱歉了。max-age和expires这两个属性控制cookie生命周期。 如果两个都设置了,以max-age为准
path:指定与cookie关联在一起的网页
在默认的情况下cookie会与创建它的网页,该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联
domain:指定共享该cookie的域,只能是一个域内多个服务器共享cookie
domain属性可以使多个web服务器共享cookie。domain属性的默认值是创建cookie的网页所在服务器的主机名。不能将一个cookie的域设置成服务器所在的域之外的域。
news.baidu.com的服务器能够读取www.baidu.com设置的cookie值。如果www.baidu.com的页面创建的cookie把自己的path属性设置为“/”,把domain属性设置成“.baidu.com”,那么所有位于www.baidu.com,以及位于baidu.com域的其他服务器上的网页都可以访问这个cookie。
secure:布尔值,传输类型(安全传输false/不安全传输true),默认是不安全传输
它是一个布尔值,指定在网络上如何传输cookie,默认是不安全的,通过一个普通的http连接传输
HttpOnly:设为true后,只能通过http访问,不能通过document.cookie获取。设定为httponly的键值,防止xss读取cookie。
简易cookie读取函数
function getCookie(c_name){
var cookie = document.cookie;
if (cookie.length>0){
c_start = cookie.indexOf(encodeURIComponent(c_name) + "=");
if (c_start!=-1){
c_start = c_start + c_name.length+1;
c_end = cookie.indexOf(";",c_start);
if (c_end==-1) c_end = cookie.length;
return decodeURIComponent(cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays){
var exdate = new Date()
exdate.setDate(exdate.getDate()+expiredays);
document.cookie = encodeURIComponent(c_name)+ "=" + encodeURIComponent(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
如果觉得本文不错,请点击右下方【推荐】!
js基础篇——cookie使用要点的更多相关文章
- js基础篇——localStorage使用要点
localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难.容量有限的问题.localStorage有以下几个特点 1.localStorage是一个普通 ...
- 前端面试题目汇总摘录(JS 基础篇)
JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...
- JS基础篇--sort()方法的用法,参数以及排序原理
JS基础篇--sort()方法的用法,参数以及排序原理 sort() 方法用于对数组的元素进行排序,并返回数组.默认排序顺序是根据字符串Unicode码点.语法:arrayObject.sort( ...
- 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.02更新)
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- Vue.js基础篇实战--一个ToDoList小应用
距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...
- js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
- JS基础篇【1】
该文讲解适用于有一定语言开发基础的朋友们,亦可当作久别重逢之回顾! 1.JS简介 JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记 ...
- 前端之js基础篇
JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...
随机推荐
- mac下android环境搭建笔记(android studio)
本文记录了本人在mac上配置android开发环境的一些过程,为了方便直接选用了官方的IDE– Android Studio .本文包括了android studio的安装.创建第一个hello wo ...
- ENode 2.0 - 深入分析ENode的内部实现流程和关键地方的幂等设计
前言 ENode是一个基于消息的架构,使用ENode开发的系统,每个环节都是处理消息,处理完后产生新的消息.本篇文章我想详细分析一下ENode框架内部是如何实现整个消息处理流程的.为了更好的理解我后面 ...
- 设计模式之美:Observer(观察者)
索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Observer 模式结构样式代码. 别名 Dependency Publish-Subscribe 意图 定义对象间的一种一对 ...
- windows10的激活及SQL Server 2008 的安装
在我第一次安装的SQL Server的时候,由于我的电脑是windows8专业版未激活的系统,当时安装的时候,首先出现提示说我电脑缺少了某一个插件,于是乎就下了安装.但是后来又是安装不上,各种问题一一 ...
- [Voice communications] 让音乐响起来
本系列文章主要是介绍 Web Audio API 的相关知识,由于该技术还处在 web 草案阶段(很多标准被提出来,至于取舍需要等待稳定版文档来确定,草案阶段的文档很多都会被再次编辑甚至重写.全部删除 ...
- [.net 面向对象程序设计进阶] (9) 序列化(Serialization) (一) 二进制流序列化
[.net 面向对象程序设计进阶] (9) 序列化(Serialization) (一) 二进制流序列化 本节导读: 在.NET编程中,经常面向对象处理完以后要转换成另一种格式传输或存储,这种将对 ...
- 熟用js中的Date
js中的Date类型是使用UTC(国际协调时间)自1970年1月1日午夜(零时)开始,经过的毫秒数来保存日期. 1. 创建日期对象 ---> 获得当前日期和时间 var now = new ...
- [每日电路图] 1、基于AT89C52单片机最小系统接口电路【转】
come from:http://www.21ic.com/dianlu/basis/interface/2015-04-21/621607.htm AT89C52是美国Atmel ...
- 用批处理文件进行TCP/IP设置,方便在家与办公IP切换
在公司用公司分配的固定IP上网,回家后又要将本本设置为家里的固定IP上网,每次都要手动重复一个过程: 打开网络中心,选择本地连接,进入属性然后选择IPV4进行TCP/IP的设置,填入IP,子网掩码DN ...
- 自制Unity小游戏TankHero-2D(2)制作敌方坦克
自制Unity小游戏TankHero-2D(2)制作敌方坦克 我在做这样一个坦克游戏,是仿照(http://game.kid.qq.com/a/20140221/028931.htm)这个游戏制作的. ...