028-86261949

当前位置:首页 > 技术交流 > 浏览器存储

浏览器存储

2018/11/07 16:21 分类: 技术交流 浏览:0

“简单介绍浏览器端的几种存储技术”,这个问题在我们出去面试的时候经常会被问到,那么我们该怎么回答与理解浏览器端存储这个问题呢?
今天小编带你们一起去理解浏览器存储。
浏览器端存储数据的用途很广泛,比如在保存用户信息、存储个性化设置信息、保存某种状态或是资料等当面都会用到。对于浏览器的存储来说,cookie存储数据的功能已经很难满足开发所需,逐渐被WebStorage所取代,本文主要介绍Cookie、WebStorage和IndexDB之间的差异。
一、Cookie
1. Cookie的来源
因为HTTP协议是无状态的,HTTP协议自身不对请求和相应之间的通信状态进行保存,而服务器端的业务必须是要有状态的。Cookie诞生的最初目的是为了储存Web中的状态信息,以方便服务器端使用,它是一个由浏览器服务器共同协作实现的规范。通俗来说,服务器不知道用户上一次做了什么,这严重阻止了交互式Web应用程序的实现。
在典型的网上购物场景中,用户浏览了几个页面,买了一盒饼干和两瓶饮料。最后结账时,由于HTTP的无状态性,不太通过额外的手段,服务器并不知道用户到底买了什么。Cookie就是用来逃开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookie中包含的信息,借此维护用户跟服务器会话中的状态。
2. 什么是Cookie
Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。Cookie是服务端生成,客户端进行维护和存储。通过cookie可以让服务器知道请求时来源哪个客户端,就可以进行客户端状态的维护,比如登录后刷新,请求头就会携带登录时response header中的set-cookie,Web服务器连接到请求时,也能读出cookie的值,根据cookie的内容可以判断和恢复一些用户的信息状态。
3. Cookie的特点
l 可以用于浏览器端和服务器端之间的交互,cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端。
l 客户端自身数据的存储,需要设置过期时间expire。设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。若不设置过期时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就消失。
4. Cokkir的生成方式
方式一: http response header中的set-cookie
方式二: js中可以通过document.cookie读写cookie   //以键值对的形式展示
5. Cookie的缺陷
l cookie会被附加在每个HTTP请求中,在HttpRequest和HttpResponse的header中都是要被传输的,所以无形中增加了一些不必要的流量损失。
cookie是用来维护用户信息的,而域名下所有请求都会携带cookie,但对于静态文件的请求,携带cookie信息根本没有用,此时可以通过cdn(存储静态文件的)的域名和主站的域名分开来解决。
l 由于在HTTP请求中的Cookie是明文传递的,所以安全性成问题,除非用HTTPS
可以使用HttpOnly提升Cookie安全性。httponly不支持读写,浏览器不允许脚本操作document.cookie去更改cookie,一般情况下都应该设置为true,这样可以避免被XSS攻击拿到cookie。
l Cookie的大小限制在4KB左右,对于复杂的存储需求来说是不够用的。很多浏览器都限制一个站点的cookie个数也是有限制的。
这里需要注意:各浏览器的cookie每一个name=value的value值大概在4K,所以4K并不是一个域名下所有的cookie共享的,而是一个name的大小。
基于Cookie存储数据功能有所欠缺,HTML5中新增了本地存储的解决方案,它分为两类:sessionStorage和localStorage。这样有了WebStorage后,cookie能制作它应该做的事情了,作为客户端与服务器交互的通道,保持客户端状态。
 
二、LocalStorage
1. LocalStorage的特点
1)保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。
2)大小为5M左右
3)仅在客户端使用,不和服务端进行通信
4)接口封装较好
基于上面的特点,LoacalStorage可以作为浏览器本地缓存方案,用来提升网页首屏渲染速度(根据第一请求返回时,将一些不变信息直接存储在本地)
 
2. LocalStorage的读/寸数据
localStorage保存的数据,以“键值对”的形式存在,也就是说,每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。
存入数据使用setItem方法。它接受两个参数,一个是键名,一个是保存的数据。
  1. loacalStorage.setItem('key','value');
读取数据使用getItem方法.它只有一个参数,就是键名。
  1. var valueLocal = localStorage.getItem('key');
3. LocalStorage的局限
1) 浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2) 目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3) localStorage在浏览器的隐私模式下是不可读的
4) localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5) localStorage不能被爬虫抓取到
localStorage和sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage的键值对会被清空。
 
三、SessionStorage
sessionStorage保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。除了保存期限的长短不同,sessionStorage的属性和方法与localStorage完全一样
1. SessionStorage的特点
1)会话级别的浏览器存储
2)大小为5M左右
3)仅在客户端使用,不和服务端进行通信
4)接口封装较好
2. sessionStorage、localStorage和cookie之间的区别
共同点:都是保存在浏览器端,且同源的。
不同点:
四、IndexedDB
webStorage使用简单字符串键值对在本地存储数据,方便灵活,但是对于大量结构化数据存储力不从心,IndexedDB是为了能够在客户端存储大量的结构化数据,并且使用索引高效检索的API
1. IndexedDB的特点
l IndexedDB是一种低级API,用于客户端存储大量结构化数据。该API使用索引来实现对改数据的高性能搜索。
l 为应用创建离线版本
2. IndexedDB的常见操作
在IndexedDB大部分操作并不是我们常用的调用方法,返回结果的模式,而是请求——响应的模式
1)建立打开indexdb --- window.indexedDB.open(‘textDB’)
这条指令并不会返回一个DB对象的句柄,我们得到的是一个IDBOpenDBRequest对象,而我们希望得到的是DB对象在其result属性中
除了result,IDBOpenDBRequest接口定义了几个重要属性
onerror:请求失败的回调函数句柄
onsuccess:请求成功的回调函数句柄
onupgradeneeded:请求数据库版本变化句柄
indexdb.close(): 关闭indexdb
window.indexedDB.deleteDatabase(indexDB):删除indexDB

 

   感谢源码时代教学讲师提供此文章!
   本文为原创文章,转载请注明出处!
#标签:浏览器存储