当前位置：浏览器存储
2018/11/07 16:21 分类： 技术交流 浏览：34
“简单介绍浏览器端的几种存储技术”，这个问题在我们出去面试的时候经常会被问到，那么我们该怎么回答与理解浏览器端存储这个问题呢？
今天小编带你们一起去理解浏览器存储。
浏览器端存储数据的用途很广泛，比如在保存用户信息、存储个性化设置信息、保存某种状态或是资料等当面都会用到。对于浏览器的存储来说，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方法。它接受两个参数，一个是键名，一个是保存的数据。
读取数据使用getItem方法.它只有一个参数，就是键名。
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
感谢源码时代教学讲师提供此文章！
本文为原创文章，转载请注明出处！
赞 0
