前端存储

一、什么是Cookie？

HTTP Cookie（也叫 Web Cookie或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

cookie特点：

• cookie的大小受限制，cookie大小被限制在4KB。
• cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁。
• 一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个。
• 用户每请求一次服务器数据，cookie会随着这些请求发送到服务器。
• cookie数据始终在同源的http请求中携带（即使不需要），这也是Cookie不能太大的重要原因

说到cookie，顺便说一下session。

什么是session？

Session 代表着服务器和客户端一次会话的过程。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当客户端关闭会话，或者 Session 超时失效时会话结束。

Cookie和Session区别：

• cookie数据存放在客户的浏览器上，session数据放在服务器上。
• cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。
• session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。
• 单个cookie保存的数据不能超过4K，Session 可存储数据远高于 Cookie。
• Cookie 可设置为长时间保持，比如我们经常使用的默认登录功能，Session 一般失效时间较短，客户端关闭或者 Session 超时都会失效。
• Cookie 只能保存 ASCII，Session 可以存任意数据类型。

二、h5新的前端储存方法(localStorage和sessionStorage)

什么是localStorage？

这是一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。它也是采用Key - Value的方式存储数据，底层数据接口是sqlite，按域名将数据分别保存到对应数据库文件里。它能保存更大的数据。

特点：

• 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。
• 大小为5M左右。
• 仅在客户端使用，不和服务端进行通信。
• 存储的信息在同一域中是共享的。
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。

操作：

设置：localStorage.setItem（'name': 'xs'）
获取：localStorage.getItem('username') 
也可以获取键名：
localStorage.key(0) #获取第一个键名。
删除：localStorage.removeItem('username') 
清楚所有：localStorage.clear()

什么是sessionStorage？

和服务器端使用的session类似，是一种会话级别的缓存，关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。使用方法（和localStorage完全相同）

操作：和localStorage操作一样。

sessionStorage和localStorage区别：

• localStorage是永久存储，除非手动删除。sessionStorage当会话结束（当前页面关闭的时候，自动销毁）
• localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

什么是IndexedDB?

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

特点：

• 键值对储存。IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以“键值对”的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
• 异步。IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
• 支持事务。IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
• 同源限制。IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
• 储存空间大。IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
• 支持二进制储存。IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

基本操作：

打开数据库：使用indexedDB.open()方法。

var request = window.indexedDB.open(databaseName, version)。

这个方法接受两个参数，第一个参数是字符串，表示数据库的名字。如果指定的数据库不存在，就会新建数据库。第二个参数是整数，表示数据库的版本。如果省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为1。

indexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过三种事件error、success、upgradeneeded，处理打开数据库的操作结果。

关闭IndexedDB：indexdb.close() 。

删除IndexedDB：window.indexedDB.deleteDatabase(indexdb) 。