前言：在日常开发中，我们经常会使用到前端的存储技术，用来存储一些即使页面刷新，也要保持状态的值，今天，小马来总结一些常用到的前端存储技术都有那些，开发过程中需要注意的一些细节

常见前端存储技术：

localStorage
SessionStorage
cookie
indexDB
web SQL

1、localStorage

介绍： localStorage是html5新引入的特性，他能够存储一些信息

用法：常用

localStorage.setItem()

localStorage.getItem()

localStorage.setItem('a', 1) // 代表在浏览器中存储了一个变量， a，他的值为1

localStorage.getItem('a') // 代表从浏览器中取出了一个变量，a

// 从 localStorage 删除保存的数据 
localStorage.removeItem('key'); 

// 从 localStorage 删除所有保存的数据 
localStorage.clear(); 

// 获取某个索引的Key 
localStorage.key(index)

LocalStorage的优点：

在大小方面，LocalStorage的大小一般为5MB，可以储存更多的信息
LocalStorage是持久储存，并不会随着页面的关闭而消失，除非主动清理，不然会永久存在
仅储存在本地，不像Cookie那样每次HTTP请求都会被携带

LocalStorage的缺点：

存在浏览器兼容问题，IE8以下版本的浏览器不支持
如果浏览器设置为隐私模式，那我们将无法读取到LocalStorage
LocalStorage受到同源策略的限制，即端口、协议、主机地址有任何一个不相同，都不会访问

注意事项：

在localStorage存储的值，全部都是字符串！！！所以当我们从中获取存储数据的时候，他都是返回的字符串

在这里就需要做类型转换，将他转换为存储之前的类型

引入一个知识点：

JSON.parse() // 将一个字符串解析为JavaScript对象；配合localStorage使用，就是会解析为存储之前的类型

使用场景：

1、需要长久记住用户的某些信息的应用 2、换肤等功能

2、Sessionstorage

Sessionstorage也是html5才提出的存储方案，他主要是用来临时保存同一个窗口的数据！他的特点是，页面刷新的时候不会删除，但是如果关闭这个窗口或者标签的时候，就会删除这些数据

用法：

// 保存数据到 sessionStorage 
sessionStorage.setItem('key', 'value'); 

// 从 sessionStorage 获取数据 
let data = sessionStorage.getItem('key'); 

// 从 sessionStorage 删除保存的数据 
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据 
sessionStorage.clear(); 

// 获取某个索引的Key 
sessionStorage.key(index)

用法和localStorage基本相同

但是他们之间也有不同：

1、二者都能在本地存储；

2、都不能被爬虫爬取（这里需要了解爬虫的原理：一般都是爬取服务器，数据存储到本地了，所以爬不到；也有浏览器安全策略，限制了对本地数据的访问）

3、都有同源的策略，但是sessionStorage更加严格！！！只有在同一个浏览器的窗口下才会共享

注意事项：

在SessionStorage中，他存储的数据也会被转化为字符串，使用JSON.parse 转一下即可

使用场景

1、因为时效性，可以存储一些c端游客登录的网站

2、个人猜测，枪战类游戏数据，也是使用SessionStorage存储的

3、cookie

用来存储计算机上的小型文本的

cookie主要有一些字段组成：

Name：cookie的名称
Value：cookie的值，对于认证cookie，value值包括web服务器所提供的访问令牌；
Size： cookie的大小
Path：可以访问此cookie的页面路径。比如domain是abc.com，path是/test，那么只有/test路径下的页面可以读取此cookie。
Secure：指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别，即在HTTPS的连接建立阶段，浏览器会检查Web网站的SSL证书的有效性。但是基于兼容性的原因（比如有些网站使用自签署的证书）在检测到SSL证书无效时，浏览器并不会立即终止用户的连接请求，而是显示安全风险信息，用户仍可以选择继续访问该站点。
Domain：可以访问该cookie的域名，Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。当需要实现单点登录方案时，Cookie 的上述特性非常有用，然而也增加了 Cookie受攻击的危险，比如攻击者可以借此发动会话定置攻击。因而，浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名，以减小攻击发生的范围。
HTTP：该字段包含HTTPOnly 属性，该属性用来设置cookie能否通过脚本来访问，默认为空，即可以通过脚本访问。在客户端是不能通过js代码去设置一个httpOnly类型的cookie的，这种类型的cookie只能通过服务端来设置。该属性用于防止客户端脚本通过

document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是，HTTPOnly的应用仍存在局限性，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头。

Expires/Max-size ：此cookie的超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。

4、IndexDB

IndexedDB 具有以下特点：

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

5、web SQL

2010年被W3C废弃的本地数据库数据存储⽅案，但是主流浏览器（⽕狐除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，⽤sql进⾏操作，当我们⽤JavaScript时要进⾏转换，较为繁琐；

建议不要使用此存储方式，官方已经弃用了，并且存在跨浏览器兼容性的问题

前端存储方式--localStorage、Sessionstorage、cookie、indexDB、web SQL