一、cookie

1. http头与cookie

cookie是HTTP Cookie的简称。该标准要求:

(1)服务器的HTTP响应头包含 Set-Cookie字段

响应头Eg:

HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: name=value

该HTTP响应设置了一个名为name,值为value的cookie。服务器将它们发送到浏览器,浏览器就会存储这样的cookie信息。

(2)浏览器的HTTP请求头包含Cookie字段

请求头Eg:

GET /index.html HTTP/1.1
Cookie: name=value

浏览器会为每个请求的请求头添加Cookie字段,将浏览器本地包含的cookie信息发送回服务器。

2. cookie的特点

(1) cookie是绑定在特定域名下的

在一个域名下设置了某cookie后,再给该域名发送请求的话都会发送该cookie。

(2)单个域下的cookie数量、大小有限制

cookie数量限制:
  • IE7+:最多50个
  • Firefox:最多50个
  • Opera:最多30个
  • Chrome和Safari:无限制

cookie超出数量限制后,浏览器会清除以前设置的cookie。具体删除方式不同浏览器不同。

cookie尺寸限制

大多数浏览器的单个域下所有cookie的总长度限制在 4096B左右。为了浏览器兼容性最好将其限制为 <= 4095B。即存储大小为4K

(3)如果没设置失效时间,cookie在浏览器关闭时就会被删除

4. API:document.cookie

(1)获取cookie

var allCookies = document.cookie;
//name1=value1;name2=value2;name3=value3

可以获取当前页面可获取的所有cookie,每条cookie以分号分隔。获取cookie键值对后,需要使用decodeURIComponent() 来对每个 cookie名和cookie值解码

(2)设置cookie

document.cookie = encodeURIComponent(name)+ '=' + encodeURIComponent(value) + ';path=somepath;domain=somedomain;max-age=somemaxage;expires=someexpires;secure';
  • 使用上述方法会设置新的cookie字符串。这个cookie字符串会被解释并添加到现有的cookie集合中。并不会覆盖现有的cookie

  • 只有name和value是必须的。最好设置时使用encodeURIComponent()对name和value进行编码。因为encodeURIComponent()可以保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值).

  • 有以下可选的cookie属性可以跟在名值对之后:

    • domain=: 指定cookie对哪个域是有效的,所有该域下的页面都能访问该cookie,所有向该域发送的请求中都会发送该cookie。默认为设置cookie的页面的域。 也可以将其设置为其他域。如果 Cookie 的域和页面的域相同,那么我们称这个 Cookie 为第一方 Cookie(first-party cookie),如果 Cookie 的域和页面的域不同,则称之为第三方 Cookie(third-party cookie)。如果一个页面包含图片或存放在其他域上的资源(如图片)时,第一方的 Cookie 也只会发送给设置它们的服务器。

    • path=: 指定cookie对于哪个路径是有效的。如'/mydir', 即可以指定该cookie只有从指定域名下的'/mydir'路径才能访问。那么 域下的其他路径及根目录就不能访问该cookie,也不会向服务器发送该cookie。默认当前文档位置的路径

    • max-age=:指定cookie有效时间,以s为单位。正常情况下,max-age的优先级高于expires

    • expires=:指定cookie失效时间,为GMT格式。如: (new Date()).toUTCString()

    • secure:安全标志,指定后,cookie只能在使用SSL连接(HTTPS协议)的时候才能发送到服务器。

    • HttpOnly:不能通过JS访问cookie,减少XSS攻击

注意: 这些属性都只存在于浏览器,并不会作为cookie信息的一部分发送到服务器,发送只发送名值对,即 请求头中Cookie字段只包含名值对;但是这些属性会从服务器发送到浏览器,用于给浏览器指示,即 响应头中Set-Cookie字段不仅包含名值对,也包含这些cookie属性

5. 自定义cookie方法

mdn的框架如下


/*
|*| * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
|*| * docCookies.getItem(name)
|*| * docCookies.removeItem(name[, path], domain)
|*| * docCookies.hasItem(name)
|*| * docCookies.keys()
|*|
*/ var docCookies = {
getItem: function (sKey) {
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
removeItem: function (sKey, sPath, sDomain) {
if (!sKey || !this.hasItem(sKey)) { return false; }
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
return true;
},
hasItem: function (sKey) {
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: /* optional method: you can safely remove it! */ function () {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
return aKeys;
}
};

《JavaScript高级程序设计》的框架

const CookieUtil = {
get: function(name) {
const cookieName = encodeURIComponent(name) + '=';
const cookieStart = document.cookie.indexOf(cookieName); if(cookieStart >= 0) {
let cookieEnd = document.cookie.indexOf(';', cookieStart);
if(cookieEnd === -1) {
cookieEnd = document.cookie.length;
} const cookieValue = decodeURIComponent(document.cookie.subString(cookieStart + cookieName.length, cookieEnd));
return cookieValue;
} else {
return null;
}
}, set: function(name, value, expires, path, domain, secure) {
let cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value); if (expires instanceof Date) {
cookieText += `; expires=${expires.toUTCString()}`;
} if (path) {
cookieText += `; path=${path}`;
} if (domain) {
cookieText += `; domain=${domain}`;
} if (secure) {
cookieText += `; secure`
} document.cookie = cookieText;
}, unset: function(name, path, domain, secure) {
this.set(encodeURIComponent(name), this.get(name), (new Date(0)).toUTCString(), domain, secure)
}
}

FTC框架

function setCookie (name, value , sec , path , domain) {
var argv = SetCookie.arguments,
argc = SetCookie.arguments.length,
expires = new Date(),
secure = (argc > 5) ? argv[5] : false;
path = (argc > 3) ? argv[3] : null;
domain = (argc > 4) ? argv[4] : null;
if(sec === null || sec === '') {sec = 600 * (24 * 60 * 60 * 1000);}
else {sec = 1000*sec;}
expires.setTime (expires.getTime() + sec);
document.cookie = name + '=' + escape (value) +((expires === null) ? '' : ('; expires=' + expires.toGMTString())) +((path === null) ? '/' : ('; path=' + path)) +((domain === null) ? '' : ('; domain=' + domain)) +((secure === true) ? '; secure' : '');
} function getCookie(name) {
const cookieStr = document.cookie;
const nameLen = name.length;
const nameStartIndex = cookieStr.indexOf(name+'=');
if (nameStartIndex < 0) {
return null;
}
const valueStartIndex = nameStartIndex + nameLen + 1;
let valueEndIndex = cookieStr.indexOf(';', valueStartIndex); if( !valueStartIndex && name !== cookieStr.substring(0, nameLen)) {////当startIndex为0的时候说明该name是第一个cookie,那name必须就是cookieStr.substring(0, name.length)
return null;
} if (valueEndIndex === -1) { //说明它就是最后一个cookie,后面没有;
valueEndIndex = cookieStr.length;
}
return decodeURIComponent(cookieStr.substring(valueStartIndex, valueEndIndex));
} function deleteCookie (name, domain, path) {
var cval = getCookie (name);
var expires = (new Date((new Date()).getTime() - 1)).toUTCString();
document.cookie = encodeURIComponent(name) + '=;'+ cval +' expires='+ expires +';domain=' + (domain ? domain : location.hostname) + ';path=' + (path ? path : '/');
}

6. *子cookie

存在意义

为了绕开 浏览器单域名下的cookie数限制。使用子cookie可以使用单个cookie进行存储和访问,而非对每一个名值对使用不同的cookie存储。

子cookie的最常见格式:

name=name1=value1&name2=value2&name3=value3

获取子cookie信息的方法

const SubCookieUtil = {
get: function(name, subName) {
const subCookies = this.getAll(name);
if(subCookies) {
return subCookies[subName];
} else {
return null;
}
}, getAll: function(name, subName) {
const cookieName = name + '=';
const cookieStart = document.cookie.indexOf(cookieName);
let subCookieValueStr; if (cookieStart >= 0) {
var cookieEnd = document.cookie.indexOf(';',cookieStart);
if (cookieEnd <0 ) {
cookieEnd = document.cookie.length;
}
subCookieValueStr = document.cookie.subString(cookieStart + cookieName.length, cookieEnd); if (subCookieValueStr.length > 0) {
subCookieItemArr = subCookieValueStr.split('&'); const result = {};
for (let item of subCookieItemArr) {
const keyValueArr = item.split('=');
if(keyValueArr.length == 2) {
result[decodeURIComponent(keyValueArr[0])] = decodeURIComponent(keyValueArr[1]);
}
}
return result;
} return null;
}
return null;
}
}

二、Web Storage: sessionStorage 和localStorage

1.Web Storage简介

Web Storage包括 sessionStorage, globalStorage,localStorage三种。

特点

克服了cookie的一些限制:

  • Web Storage存储的数据被严格 控制在客户端不会将数据发回服务器
  • 数据存储容量更大。对于localStorage,大多数浏览器对每个源限制5MB,也有2.5MB的。sessionStorage有的限制是2.5MB,有的是5MB。

三种类型的特点各不相同。

API

方法:

三种Storage实例都有以下方法:

  • Storage.getItem(name):获取指定名字对应的值
  • Storage.key(index):获得index位置处的名值对的名字
  • Storage.removeItem(name): 删除由name指定的名值对
  • Storage.setItem(name, value):为指定的name设置一个值

每个名值对是作为属性存储在Storage对象上的,所以也可以通过'.'或'[]'访问属性来获取值,通过delete删除对象属性。但 更推荐用方法 来访问数据。

事件

storage事件。

对Storage对象的任何修改都会触发storage事件。包括添加、修改、删除数据。

其event对象属性:

  • domain:发生变化的存储空间的域名
  • key:设置或删除的键名
  • newValue:如果是设置值,就为新值;如果是删除值,就为null
  • oldValue:修改之前的值

2. sessionStorage对象

简介

sessionStorage对象存储 特定于某个会话(页面)的数据,对 特定于某个会话的理解:

  • 会话就是 页面 的意思。其中的数据只能由 最初给对象存储数据的页面访问。即不可被其他页面访问。
  • 页面会话在浏览器打开期间一直保持,并且 重新加载或恢复页面仍会保持原来的页面会话在新标签或新窗口打开一个页面会初始化一个新的会话
  • 其中的数据会在页面会话结束(即 浏览器关闭)时被清除。

用例:

sessionStorage.setItem('name','Boonie');
sessionStorage.getItem('name');//"Boonie"
sessionStorage.removeItem('name'); const data = {};
for(let i=0, len = sessionStorage.length; i<len; i++) {
const name = sessionStorage.key(i);
const value = sessionStorage.getItem(name);
data[name] = value;
}

3. localStorage对象

简介

localStorage对象存储 特定于某个域名的、跨对话的、持久保存的数据。具体理解:

  • 访问同一个localStorage对象,页面必须符合 同源协议(即域名、协议和端口相同)
  • 可以跨对话(页面)访问,只要页面符合同源协议
  • 如果 不使用removeItem()或delete删除,也不清除浏览器缓存,存储于localStorage的数据将 一直存在,一直保留在磁盘上。

用例

localStorage.setItem('name', 'Bonnie');
localStorage.getItem('name');

4. *globalStorage['xxx.com']对象

简介

localStorage取代了globalStorage。

特性和localStorage基本一样,但相比localStorage, globalStorage有特定的访问限制:需要通过[]来指定域。globalStorage对象不是Storage实例,globalStorage['xxx.com']才是Storage实例。

localStorage相当于 globalStorage[location.host]

大多浏览器都不支持globalStorage,Chrome也不支持。

tips: location.host包含域名和端口号,location.hostname只是域名,location.port只是端口号,location.origin包含完整的协议、域名、端口号

用例

globalStorage['www.example.com'].getItem('name');

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

cookie与web Storage的更多相关文章

  1. 数据存储的两种方式:Cookie 和Web Storage

    数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡,这个购物卡里存放了一些你的个人信息,下次你再来这个连锁超市时, ...

  2. 数据存储的两种方式:Cookie 和Web Storage(转)

    数据存储的两种方式:Cookie 和Web Storage   数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡 ...

  3. cookie和session,cookie和web storage

    一.cookie和session cookie和session的共同之处在于:cookie和session都是用来跟踪浏览器用户身份的会话方式. session指的是访问者从到达某个特定页面到离开为止 ...

  4. 数据存储之Cookie和Web Storage。

    Cookie Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).接下来就谈谈cookie的一些利弊,coo ...

  5. 客户端本地存储(cookie、web Storage、vuex)选择

    一.cookie .localStorage .sessionStorage .vuex 比较 cookie   4K    有时效性    可服务器传递 cookie是由服务器产生,存储在客户端的一 ...

  6. web storage和cookie的区别

    Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外co ...

  7. Web Storage和cookie

    Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生; Web Storage的概念和cookie相似,区别是它是为了更大容 ...

  8. Web Storage与Cookie相比存在的优势:

    (1).存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多. (2).存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一 ...

  9. 【对比分析二】Web Storage和cookie的区别

    1)  存储空间不同. a)  Web Storage能提供5MB的存储空间(不同浏览器的提供的空间不同).Cookie仅4KB. b)  Web Storage每个域(包括子域)有独立的存储空间,各 ...

随机推荐

  1. hibernate 查询方式

    1.对象导航查询 2.OID查询 3.hql查询 4.QBC查询 5.本地sql查询 一.对象导航查询 示例: 查询id=6的user对象的所有角色: 二.OID查询 实例查询id=6的user对象 ...

  2. ip地址设备信息

    其实是个小问题,在项目中遇到要获取手机ip地址和mac地址的问题,mac地址获取用appcan的uexDevice插件可以实现. 但是ip地址,获取的方式很多,具体有搜狐/腾讯/新浪等提供的接口.但是 ...

  3. python 局部local和全局global变量

    global和local变量 虽然简单,但是还是记录一下,主要是转载 转载自:http://blog.sina.com.cn/s/blog_436992740102ux8z.html   先看一段代码 ...

  4. 第14条:尽量用异常来表示特殊情况,而不要返回Nono

    核心知识点: 1.用None这个返回值来表示特殊意义的函数,很容易使调用者犯错,因为None和0以及空字符串之类的值,在条件表达式里都会评估为False. 2.两种方法:二元法:将异常抛给上一级直接报 ...

  5. Vue:实践学习笔记(1)——快速使用

    Vue:实践学习笔记(1)——快速使用 Vue基础知识 0.引入Vue 官方地址:Vue的官方下载地址 Vue推荐博客:keepfool 在你的程序中快速引入Vue: <!-- 开发环境版本,包 ...

  6. HTML 获取屏幕,浏览器,页面的高度

    1,物理尺寸和分辨率 容器的尺寸是指当前分辨率下的高度.宽度,而不是物理高度.宽度. 如:一个22寸的显示器,屏幕分辨率为1366 * 768,那么获取到的屏幕高度为1366px,宽度为768px. ...

  7. java并发实现原子操作

    来自<java并发编程的艺术>.只是方便自己以后查找. 处理器如何实现原子操作 32位IA-32处理器使用基于对缓存加锁或总线加锁的方式来实现多处理器之间的原子操作.首先处理器会自动保证基 ...

  8. Data Structure Binary Tree: Populate Inorder Successor for all nodes

    http://www.geeksforgeeks.org/populate-inorder-successor-for-all-nodes/ #include <iostream> #in ...

  9. 【leetcode刷题笔记】Divide Two Integers

    Divide two integers without using multiplication, division and mod operator. 题解:要求不用乘除和取模运算实现两个数的除法. ...

  10. import from 'xxx'是如何找到node_modules目录下的

    起初我认为这是ES6或者Webpack的语法,但查阅相关API后并没有相关说明,通过进一步地搜索,才知道这是Node模块系统的约定和实现(Webpack打包工具是兼容node模块系统的,自然遵守相关规 ...