浏览器存储

以下介绍cookie、localStorage、sessionStorage、indexedDB。
一、Cookie
more discussion
1.来源
HTTP协议是无状态的,自身不对请求和响应之间的通信状态进行保存(一个服务器是不清楚是不是同一个浏览器在访问它)。服务器可以设置或读取Cookies中包含信息,借此维护浏览器与服务器的会话状态。

image.png

图中服务器对客户端的响应中,携带cookie,准确而言,是在HttpResponse的header中。
2.定义
Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成,客户端进行维护和存储。通过cookie,服务器可以知道请求是来自哪个客户端,就可以进行客户端状态的维护,根据cookie值的内容就可以判断和恢复一些用户的信息状态。(有些网站会询问用户是否保存登录密码,如果是那么下次(一般有时间限制)就可以自动登录,这就涉及cookie)。
2-2. 构成
(1)Name:一个唯一确定 cookie 的名称,必须被URL编码。
(2)Value:存储在cookie中的字符串,值必须被URL编码。
(3)Domain(域):指定cookie对哪个域有效,那么所有向该域发送的请求中都会包含这个 cookie 信息。上级域对应的 cookie 对其子域都有效(例如 某个域(domain)为 baidu.com 的 cookie,对于 baidu.com 的所有子域(如 baike.baidu.com)都有效 )。
(4)Path(路径):只对指定的路径发送cookie信息,例如域名为www.baidu.com的某个cookie,路径为 /books/,那么请求 http://www.baidu.com/ 对应的页面,就不会发送该cookie,即使请求的页面来自同一个域。
(5)Expires / Max-Age:表示cookie何时应该被删除(即停止向服务器发送这个cookie)。默认情况下,浏览器会话结束时就将所有cookie删除。在指定了删除时间后且当前未到期,cookie在浏览器关闭后依然保存在用户本地。
(6)Secure:安全标志。
注意:域、路径、失效时间、安全标志都是服务器给浏览器的关于一条cookie 的指示,浏览器从而确定在给服务器发送请求时,是否发送该cookie。域、路径、失效时间等这些指示信息并不会发送到服务器,只有name/value名值对才会被发送。

3.特点
(1)可用于客户端和服务器之间的交互,cookie的数据会自动的传递到服务器,服务器也可以写cookie(通过set-Cookie)到客户端。
(2)客户端自身数据的存储,需要设置过期时间expire。设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。若不设置过期时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就消失。
(3)同一个主域名下的二级域名也是不可以交换使用cookie的,比如www.baidu.comimage.baidu.com不能公用cookie的。

chrome中查看cookie

4.生成方式
(1) http response header中的set-cookie
(2) js中可以通过document.cookie读写cookie

document.cookie="gender=male";

5.缺点
(1)cookie会被附加在每个HTTP请求中,在HttpRequest 和HttpResponse的header中都会被传输,因而增加流量损失。
(cookie是用来维护用户信息的,而域名(domain)下所有请求都会携带cookie,但对于静态文件的请求,携带cookie信息根本没有用,此时可以通过cdn(存储静态文件的)的域名和主站的域名分开来解决。)

(2)由于在HTTP请求中的Cookie是明文传递的,所以存在安全性问题,除非用HTTPS。
(可以使用HttpOnly提升Cookie安全性。httponly 不支持读写,浏览器不允许脚本操作document.cookie去更改cookie,一般情况下都应该设置这个为true,这样可以避免被XSS攻击拿到cookie。)

(3)Cookie的大小限制在4KB左右,对于复杂的存储需求来说是不够用的。很多浏览器都限制一个站点的cookie个数也是有限制的。
(注意:各浏览器的cookie每一个name=value的value值大概在4k,所以4k并不是一个域名下所有的cookie共享的,而是一个name的大小。)

6.总结
Cookie目前主要作为客户端与服务器交互的载体,保持客户端的某些状态。存储数据功能则主要交给 webStorage(分为sessionStoragelocalStorage)以及indexedDB

二、localStorage
详细介绍

localStorage maintains a separate storage area for each given origin, and persists even when the browser is closed and reopened.
1.特点
(1)保存的数据长期存在,下一次访问该网站的时候,可以直接读取以前保存的数据。(直到通过JS删除或者用户清除浏览器缓存)
(2)大小为5M左右。
(3)仅在客户端使用,不和服务端进行通信
(4)接口封装较好
由于以上特点,LocalStorage可以作为浏览器本地缓存方案,用来提升网页首屏渲染速度(根据第一次请求返回结果,将一些不变信息直接存储在本地)。

2.存入/读取数据
localStorage保存的数据,以“键值对”的形式存在。也就是说,每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。
存入数据使用setItem方法。

localStorage.setItem("key","value");

读取数据使用getItem方法。

var valueLocal = localStorage.getItem("key");

chrome查看localStorage

3.实例
这里借用MDN网站上的例子,在一个页面中可以设置背景色、字体、图片,设置完毕,关闭页面,下次打开的时候,上次的设置依然存在。这背后就用到了 localStorage,
MDN例子

同一个域名(domain)下的不同页面( page )可以访问同一个localStorage,正因如此,若在页面A中对 localStorage 对象进行了改动,相同域名下的页面B可通过以下代码设置针对 storage 对象变化的监听来同步这些改动。(但改动sessionStorage对象并不会触发 StorageEvent 事件,因为 localStorage 和 sessionStorage 对应的 Strorage 对象是不同且互相独立的)。

window.addEventListener('storage', function(e) {  
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector('.my-old').textContent = e.oldValue;
  document.querySelector('.my-new').textContent = e.newValue;
  document.querySelector('.my-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
});
同域名下页面B同步页面A中对 localStorage 对象 的改动.png

注意:

Pages on other domains can't access the same storage objects.
要访问同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。

三、SessionStorage
sessionStorage保存的数据用于浏览器的一次会话(session),当会话结束(通常是该窗口关闭),sessionStorage就被清空(sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores).);
sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的;
除了保存期限的长短不同,SessionStorage的属性和方法与LocalStorage完全一样。

A different Storage object is used for the sessionStorage and localStorage for each origin — they function and are controlled separately.

特点:
会话级别的浏览器存储;
大小为5M左右;
仅在客户端使用,不和服务端进行通信;
接口封装较好;
基于上面的特点,SessionStorage 可以有效对表单信息进行维护,比如刷新时,表单信息不丢失。

四、IndexedDB
WebStorage使用简单字符串键值对在本地存储数据,方便灵活,但不适于大量结构化数据存储,IndexedDB是为了能够在客户端存储大量的结构化数据(由于不会加密数据,所以不要存储敏感数据),并且使用索引高效检索的API。
IndexedDB是一种类似于SQL数据库的结构化数据存储机制,但其数据不是保存在表中,而是保存在对象存储空间中。
特点:
(1)IndexedDB是一种低级API,用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。
(2)为应用创建离线版本。
限制:
(1)IndexedDB数据库只能由同源(相同协议、域名、端口)页面操作,不能跨域共享信息;
(2)每个源(origin)对应的IndexedDB占用的磁盘空间有限制,在不同的浏览器上不同,一般大于webStorage.

基本操作:在IndexedDB大部分操作并不是常用的调用方法,返回结果的模式,而是请求——响应的模式。
(1)建立打开indexdb---window.indexedDB.open("testDB")
得到的是一个IDBOpenDBRequest对象,而希望得到的DB对象在其result属性中.
(2)关闭indexdb----indexdb.close();
(3)删除indexdb----window.indexedDB.deleteDatabase(indexdb)。

reference:
1
2

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