前端数据存储：cookie、localStorage、sessionStorage、indexDB差异分析，及简单使用介绍

一，总述

特性	cookie	localStorage	sessionStorage	indexDB
数据生命周期	一般由服务器生成，可以设置过期时间	除非主动清理，否则一直存在	页面关闭时清理	除非主动清理，否则一直存在
数据存储大小	4K	5M	5M	不限
与服务端通信	每次都会携带在 header 中，对于请求性能影响	不参与	不参与	不参与

使用原则： 如果没有大量数据存储需求的话，可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储，否则可以用 sessionStorage 存储。如果是大量数据存储本地的话，可以使用indexDB进行存储（一般网页游戏中可能会用到更多）。但是也有像微信小游戏等平台，是不支持indexDB的，这时候如果我们游戏中需要本地存储大量数据（例如本地做对局回放，需要保存对局数据等），一般会用node的fs模块进行文件管理操作，创建本地文件进行数据储存，来实现indexDB的功能。特别是微信小游戏是提供了相应的api支持这种方式操作的。

二，简单使用介绍

1.cookie

（1）cookie既可以后端设置也可以在前端设置，例如登陆/注册功能，每次都要向服务器请求用户数据，这种就可以把cookie放到前端储存起来。
（2）当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。
（3）查看当前网页的cookie：在控制台输入 document.cookie
（4）前端设置cookie：document.cookie = XXXX；对于 cookie 来说，我们还需要注意安全性。
这里插入下token的引入（也是解决前后端交互的一种方案）：
1、Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。
2、Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
3、使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库

2.localStorage

（1）保存数据：

localStorage.setItem("key", "value");

（2）获取数据：

var lastname = localStorage.getItem("key");

（3）删除数据语法：

localStorage.removeItem("key");

3.sessionStorage

（1）设置值

sessionStorage.setItem(key,value);

（2）得到值

var data=sessionStorage.getItem(key);

（3）删除值

sessionStorage.removeItem(key);

（4）清除Session中所有的值

sessionStorage.clear();

4.indexDB

（1）打开数据库

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