程序员程序猿阵线联盟-汇总各类技术干货Web前端之路

浏览器存储

2018-05-15  本文已影响419人  浪里行舟

一、前言

web前端技术日新月异，对于浏览器的存储来说，cookie存储数据的功能已经很难满足开发所需，逐渐被WebStorage所取代，本文主要介绍Cookie,WebStorage和IndexDB之间差异。

二、Cookie

1.Cookie的来源

因为HTTP协议是无状态的，HTTP 协议自身不对请求和响应之间的通信状态进行保存，通俗来说，服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，于是就诞生了Cookie。它就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。
在刚才的购物场景中，当用户选购了第一项商品，服务器在向用户发送网页的同时，还发送了一段Cookie，记录着那项商品的信息。当用户访问另一个页面，浏览器会把Cookie发送给服务器，于是服务器知道他之前选购了什么。用户继续选购饮料，服务器就在原来那段Cookie里追加新的商品信息。结帐时，服务器读取发送来的Cookie就行了。

2.什么是Cookie

Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储。通过cookie,可以让服务器知道请求是来源哪个客户端，就可以进行客户端状态的维护，比如登陆后刷新，就会请求头就会携带登陆时response header中的set-cookie,Web服务器接到请求时也能读出cookie的值，根据cookie值的内容就可以判断和恢复一些用户的信息状态。

3.Cookie的特点

4.Cookie的生成方式

生成方式一：http response header中的set-cookie

生成方式二：js中可以通过document.cookie可以读写cookie//以键值对的形式展示

例如我们在简书控制台输入，以下两句代码，便可以在"Application"查看生成的cookie

<script>
document.cookie="userName=hello"
document.cookie="gender=male"
</script>
Cookie

5.Cookie的缺陷

cookie是用来维护用户信息的，而域名(domain)下所有请求都会携带cookie，但对于静态文件的请求，携带cookie信息根本没有用，此时可以通过cdn（存储静态文件的）的域名和主站的域名分开来解决。

可以使用HttpOnly提升Cookie安全性。httponly 不支持读写，浏览器不允许脚本操作document.cookie去更改cookie，一般情况下都应该设置这个为true，这样可以避免被XSS攻击拿到cookie。

这里需注意：各浏览器的cookie每一个name=value的value值大概在4k，所以4k并不是一个域名下所有的cookie共享的,而是一个name的大小。

基于Cookie存储数据功能有所欠缺，HTML5中新增了本地存储的解决方案----WebStorage，它分成两类：sessionStorage和localStorage。这样有了WebStorage后，cookie能只做它应该做的事情了——作为客户端与服务器交互的通道，保持客户端状态。

三、LocalStorage

1.LocalStorage的特点

基于上面的特点，LocalStorage可以作为浏览器本地缓存方案，用来提升网页首屏渲染速度(根据第一请求返回时，将一些不变信息直接存储在本地)。

2.存入/读取数据

localStorage保存的数据，以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。
存入数据使用setItem方法。它接受两个参数，第一个是键名，第二个是保存的数据。
localStorage.setItem("key","value");
读取数据使用getItem方法。它只有一个参数，就是键名。
var valueLocal = localStorage.getItem("key");
具体步骤，请看下面的例子：

<script>
if(window.localStorage){
  localStorage.setItem（'name','world'）
  localStorage.setItem（“gender','famale'）
}
</script>

<body>
<div id="name"></div>
<div id="gender"></div>
<script>
var name=localStorage.getItem（'name'）
var gender=localStorage.getItem（'gender'）
document.getElementById（'name'）.innerHTML=name
document.getElementById（'gender'）.innerHTML=gender
</script>
</body>

四、SessionStorage

sessionStorage保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。除了保存期限的长短不同，SessionStorage的属性和方法与LocalStorage完全一样。

1.SessionStorage的特点

基于上面的特点，SessionStorage 可以有效对表单信息进行维护，比如刷新时，表单信息不丢失。

2.sessionStorage 、localStorage 和 cookie 之间的区别

共同点：都是保存在浏览器端，且同源的。

不同点如下：

三者区别

五、IndexedDB

Web Storage使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储力不从心，IndexedDB是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。

1.IndexedDB的特点

2.IndexedDB的常见操作

在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式
①建立打开indexdb ----window.indexedDB.open("testDB")
这条指令并不会返回一个DB对象的句柄，我们得到的是一个IDBOpenDBRequest对象，而我们希望得到的DB对象在其result属性中

除了result，IDBOpenDBRequest接口定义了几个重要属性
onerror: 请求失败的回调函数句柄
onsuccess:请求成功的回调函数句柄
onupgradeneeded:请求数据库版本变化句柄

<script>
function openDB(name){
var request=window.indexedDB.open(name)//建立打开indexdb 
request.onerror=function (e){
console.log（'open indexdb error'）
}
request.onsuccess=function (e){
myDB.db=e.target.result//这是一个 IDBDatabase对象，这就是IndexedDB对象
console.log(myDB.db)
}
}
var myDB={
name：'testDB'，
version：'1'，
db:null
}
openDB(myDB.name)
</script>

控制台得到一个 IDBDatabase对象，这就是IndexedDB对象

②关闭indexdb----indexdb.close()
③删除indexdb----window.indexedDB.deleteDatabase(indexdb)

<script>
function openDB(name){
var request=window.indexedDB.open(name)
request.onerror=function(e){
console.log（'open indexdb error')
}
request.onsuccess=function(e){
myDB.db=e.target.result
callback && callback()
  }
}
var myDB={
name："testDB"，
version："1"，
db:null
}
openDB(myDB.name,function(){//回调函数
myDB.db.close()//关闭indexdb
window.indexedDB.deleteDatabase(myDB.db)//删除indexdb
}
</script>

如果觉得文章对你有些许帮助，欢迎在我的GitHub博客点赞和关注，感激不尽！

六、参考

HTML5本地存储——IndexedDB（一：基本使用）
详说 Cookie, LocalStorage 与 SessionStorage

上一篇 下一篇

猜你喜欢

热点阅读