左手Cookie“小甜饼”,右手Web Storage

目录

1. Web Storage

2. Cookie机制

3. 二者的联系与区别


1.Web Storage

1.1 概述

Web Storage是HTML5提供的一种新的浏览器端数据储存机制,它提供两种数据存储的对象:

  • localStorage:该对象存储的数据没有时间限制;

  • sessionStorage : 该对象存储的数据仅用于浏览器的一次对话,当对话结束(通常是窗口关闭),数据被清空;

1.2 特性
  • localStorage 和 sessionStorage对象都是构造函数Storage的实例,拥有同样的属性和方法,二者唯一的区别是存储数据的期限不一;
attribute 1-1
attribute 1-2
attribute 1-3
  • localStorage和sessionStorage这两个对象相较于cookie的存储机制,能够提供更大的数据存储空间,但是存储空间根据浏览器类型而定,一般Chrome是2.5MB、Firefox和Opera是5MB、IE是10MB;

  • 目前现代浏览器均支持web存储,但IE 7-是不支持的,依旧采用传统的cookie保持信息;
    检测浏览器是否支持web存储的方法有:

//method 1
window.localStorage && window.localStorage.getItem
//method 2
if (typeOf(Storage) !== 'undefined'){
    //support Web Storage
}else{
}
  • 使用Web Stroage的API进行数据存储是,只能存储为字符串数据,因此所以数据在写入时会隐式调用toString方法转换为字符串;
var data = {
  name:'teren',
  age:18
}
localStorage.setItem('data',data);
console.info(localStorage.data);
localStorage.setItem('realData',JSON.stringify(data));
console.info(localStorage.realData)
attribute 1-4

【注意事项】

  1. 使用前要判断浏览器是否支持Web Stroage(无痕模式和低版本的IE不支持);
  2. 超出存储容量的处理;
  3. 避免敏感信息存入Web Storage,要注意XXS的注入风险
1.3 优势与局限性

优势

  • 存储空间大:与cookie的4k存储空间相比,Web Storage虽然不同浏览器的标准可能不一样,主流的一般都在5~10M;
  • 页面性能优化:本地存储的数据不会被发到服务器,与cookie相比,节省带宽,加快响应速度
  • 接口更加易用

局限性

  • server端无法获取本地数据,如有需求,可通过post/get方法;
  • 只能同源共享数据;
1.4 接口

由于localStorage和sessionStorage对象的属性和方法是基本一致,下面以localStorage为例,讲解一下localStorage对象的接口;

  • 存储数据
//method 1
localStorage.setItem('key','value');
//method 2
localStorage.key = value
  • 读取数据
//method 1
localStorage.getItem('key')
//method 2 
localStorage.key
localStorage.setItem('name','teren')
console.log(localStorage.name)
localStorage.age = 12
console.log(localStorage.age)
localStorage.getItem('name'
  • 删除数据
//method 1 
localStorage.removeItem('key')//删除特定的key
//method 2
localStorage.clear()//删除所有的数据
  • 获取特定索引的key
localStorage.key(index)
API 1-1
  • 事件监听
    当存储的数据发生变化时,会触发storage事件,我们可以通过以下代码了解storage的事件对象包含哪些属性
function setData(key,value){
  localStorage.setItem(key,value)
};
setData('name','teren')
setData('first','kobe')
window.addEventListener('storage',function(e){

  console.log(e.oldValue);
  console.log(e.newValue);
  console.log(e.url)
},false)

注意,该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面,当其中的一个页面改变sessionStorage或localStorage的数据时,其他所有页面的storage事件会被触发,而原始页面并不触发storage事件。可以通过这种机制,实现多个窗口之间的通信。所有浏览器之中,只有IE浏览器除外,它会在所有页面触发storage事件。(源自阮一峰

具体什么意思,请看下面的截图就一目了然:

API 1-2
API 1-3
  • localStorage.length表示localStorage对象的key的数量
1.5 实战
//html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  网站名:<input type="text" id="website">
  <br>
  网站地址:<input type="text" id="url">
  <br>
  <button id='confirm'>确认</button>
  <hr>
  网站名:<input type="text">
  <br>
  <div id="list"></div>
  <button id="search" autocomplete>查询</button>
</body>
</html>
//js
(function(){
  var confirm = document.getElementById('confirm')
var search = document.getElementById('search')
var website = document.getElementById('website')
var url = document.getElementById('url')
var list = document.getElementById('list')

confirm.addEventListener('click',function(e){
  localStorage.setItem('website',url.value)
  console.log(localStorage.website)  
});

search.addEventListener('click',function(e){
 document.getElementById('list').innerHTML = localStorage.getItem('website')
  console.log(list,innerHTML)
});
})();

demo

2.Cookie机制

Cookie原意是小甜饼,是服务器保存在浏览器的一小段文本信息,属于其中一种互联网存储机制。

2.1 Cookie特点
  • 每个Cookie大小一般不超过4KB;
  • Cookie保存的信息包括Cookie名、Cookie值、到期时间、所属域名和生效路径;
  • 浏览器每次向服务器发出请求,会在Http请求头上带上Cookie信息;
2.2 Cookie API
  • 浏览器可以设置拒绝Cookie
window.navigator.cookieEnabled = false;
  • 获取当前页面的所有Cookie
var allCookies = document.cookie
//document.cookie返回的是分号分隔的所有cookie,如要取得每个cookie的值,可使用
var cookies = document.cookie.split(';');
for (var i=0;i<cookies.length;i++){
    console.log(cookies[i])
}
  • 写入Cookie
document.cookie =  'name=teren';
//document.cookie一次只能写一个cookie,而且是写入而不是覆盖;

[疑问]为什么读取cookie是全部,而写入则是一个一个呢?
这与浏览器和服务器之间的cookie通信格式相关。

  • 浏览器向服务器发送cookie时,是将所有cookie一起发送;
GET /sample_page.html HTTP/1.1
Host: www.example.orgCookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2Accept: */*
  • 服务器告诉浏览器需要存储cookie时,则是分行设定
HTTP/1.0 200 OKContent-type: text/htmlSet-Cookie: cookie_name1=cookie_value1Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT
  • 删除cookie
    删除cookie的简便方法就是设置expires = 0或者是过期时间,如expires = Thu,01-Jan-1970 00:00:01 GMT
  • cookie的属性
Set-Cookie: value[;expires = date][;domain = domain][;path = path][;secure][;HttpOnly]

value:规定cookie的值,形式是键值对;
expires:规定cookie过期时间,格式为形式为expires = someDate.toGMTString()
domain:指定cookie所在的域名,只有访问的域名匹配domain属性,cookie才会发送到服务器;
path:指定路径,只有path属性匹配向服务器发送的路径,cookie才会发送,只要path属性匹配发送路径的一部分,都可以发送;
secure:指定cookie只能在加密协议HTTPS下发送到服务器;
HttpOnly:设置cookie不能被js读取,这主要是放置XSS攻击盗取cookie;

一个完整的浏览器设置cookie写法:

document.cookie = 'name=teren;'
+'expires = Thu,01-Jan-1970 00:00:01 GMT'
+'domain = terenyeung.com;'
+'path = /;'
+'secure;'
+'HttpOnly'

3.Web Storage和Cookie的联系与区别

特性|cookie|Web Storag
---|---
数据生命周期|服务器生成的话,为指定失效时间;浏览器段生成的话默认为关闭浏览器后|localStorage永久有效,除非使用localStorage.clear()清空;sessionStorage为关闭浏览器后;
存储空间|一般为4K|一般5MB~10MB
与服务器通信|每次携带在HTTP头中|仅在客户端,如需通信,可通过get或post方法
应用场景|用户登录身份验证(结合HttpOnly相对安全性高)|保存用户购物车信息以及HTML5游戏的本地存储


参考资料

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容