方法
我们主要讲以下四种本地javascript缓存的方法:
cookiesessionstoragelocalstorageindexddb
甜饼干
HTTP是一种无状态协议:每一个请求都是完全独立的，服务器无法确认当前访问者的身份信息，也无法分辨最后一个请求的发送者与这个请求的发送者是否是同一个人。所以为了跟踪服务器和浏览器之间的会话，需要主动维护一个状态，用来通知服务器前后两个请求是否来自同一个浏览器。而这种状态需要通过cookie或者session来实现。存储在客户端的cookie:cookie是由服务器发送到用户浏览器并存储在本地的一小段数据。下次浏览器向同一服务器发出另一个请求时，它将被携带并发送到服务器。cookie是不跨域的:每个cookie都会绑定一个域名，不能在其他域名下使用。允许一级域名和二级域名之间共享。
cookie的重要属性
cookie，属于“小文本文件”的类型，指的是一些网站为了识别用户而存储在用户本地终端上的数据。就是解决无状态HTTP造成的问题。
作为一小段一般不超过4KB的文本数据，它由一个名称、一个值和其他几个可选属性组成，用于控制cookie的有效性、安全性和使用范围。
但是，cookie将在每个请求中发送。如果HTTPS没有被使用和加密，它保存的信息很容易被窃取，从而导致安全风险。例如，在一些使用cookie来保持登录的网站上，如果cookie被盗，其他人可以很容易地使用您的cookie来冒充您的登录网站。
关于cookie的常用属性如下:
Expires用于设置cookie的过期时间。
过期时间= 2015年10月21日星期三07:28:00 GMT
Max-Age用于设置cookie过期前经过的秒数。
最大年龄=604800
域指定cookies可以传递到的主机名。Path指定URL路径，该路径必须出现在要请求的资源的路径中，然后才能发送cookie标头。
Path=/docs # /docs/Web/下的资源将有一个cookie头。
标记为安全的cookie只能通过HTTPS协议加密的请求发送到服务器。
从上面可以看出，cookie的功能并不是为了再次缓存而设计的，而是借用了cookie的特性来实现缓存。
cookie的使用如下:
document.cookie = ' name = value
关于cookie的修改，我们首先要确定域和路径属性是相同的，当其中一个不同时就会创建一个新的cookie。
set-cookie:name = aa；domain = aa . net；path =/# server sets document . cookie = name = bb；domain = aa . net；Path=/ #客户端设置
最后，删除cookie最常见的方法是为cookie设置一个过期事件，这样cookie过期后就会被浏览器删除。
本地存储
HTML5的新方法兼容IE8及以上浏览器。
特性
生命周期:持久的本地存储。除非主动删除数据，否则存储的信息永远不会过期。信息在同一个域中共享。在此页面上操作本地存储时，此页面不会触发存储事件，但其他页面会触发。Size: 5MlocalStorage本质上是读取一个字符串。存储太多内容会消耗内存空，导致同源策略限制换页卡。
让我们来看看localStorage的用法。
建立
localStorage.setItem
获得
本地存储. getItem
获取密钥名称
LocalStorage.key //获取第一个密钥名
删除
本地存储. removeItem
立即清除所有存储。
本地存储. clear
LocalStorage也不完美。它有两个缺点:
不能像cookie一样设置过期时间。只能存储字符串，不能直接存储对象。
localStorage.setItemconsole . log)；//'[对象，对象]'
如何实现localStorage的过期机制？
Local本身没有过期机制，但是我们可以通过其他方式来扩展它，以满足我们数据过期的需求。
存储数据的时候，顺便把过去的时间传进去；采集数据时，判断当前数据是否过期，过期数据返回未定义；否则，数据将正常返回。
storage . prototype . setstoragewithage = = > { if | | age < 1)抛出新错误；Const obj = {data: value，//存储值time: Date.now，//存储值时间戳maxAge: age，//过期时间}；local storage . setitem)；};storage . prototype . getstoragewithage = key = > { const { data，time，maxAge } = JSON . parse)；if){ local storage . remove item；返回未定义的；}返回数据；};
本地存储
类似于服务器端的session，sessionStorage是一个会话级的缓存，当浏览器关闭时数据会被清除。需要注意的是，sessionStorage的作用域是在窗口级别，也就是说，不同窗口之间保存的sessionStorage数据是不能共享的。
会话存储的特征:
会话存储数据仅存在于当前浏览器的选项卡中；刷新数据页后仍然存在，但关闭浏览器选项卡后数据会被清除；与localStorage有统一的API接口；对数据的操作是同步的。
扩展前端存储模式
IndexedDB是一个底层API，客户端使用它来存储大量的结构化数据。API使用索引来实现对这些数据的高性能搜索。
尽管Web存储对于存储少量数据很有用，但这种方法对于存储大量结构化数据并不十分有用。IndexedDB提供了一个解决方案。
优势:
理论上，存储量没有上限。所有操作都是异步的，这比LocalStorage同步操作具有更高的性能。尤其是在数据量很大的情况下，支持JS存储的原生对象是一个合适的数据库，也就是说数据库能做的都做了。
缺点:
操作很复杂，有一定的门槛。
使用indexedDB的基本步骤如下:
打开数据库并启动一个事务。创建一个对象存储并构建一个请求来执行一些数据库操作，例如添加或提取数据。通过侦听DOM事件的正确类型来等待操作完成。对操作结果执行一些操作。
indexdb的使用会比较复杂，可以使用Godb.js库进行缓存，尽量降低操作难度。
区分
cookie、sessionStorage和localStorage之间的差异如下:
存储大小:cookie数据大小不能超过4k。sessionStorage和localStorage虽然也有存储大小限制，但都比cookies大很多，可以达到5M甚至更长的有效时间:localStorage存储持久化数据，除非主动删除数据，否则浏览器关闭后数据不会丢失；当前浏览器窗口关闭后，SessionStorage数据会自动删除；设置的cookie在到期之前一直有效。即使窗口或浏览器关闭了数据与服务器的交互，cookie数据也会自动传输到服务器，服务器也可以向客户端写入cookie。SessionStorage和localStorage不会自动向服务器发送数据，而只是将数据存储在本地。
应用场景
了解了上面提到的前端的缓存方式后，我们可以看看错误场景的使用选项:
标记和跟踪用户的行为，建议对长期存储在本地的数据使用cookie，对一次性登录使用localStorage敏感帐户，使用sessionStorage存储大量数据，并保存在线文档的编辑历史，使用indexedDB。
通用标准
web数据库API实际上并不是HTML5规范的一部分，而是一个单独的规范，它引入了一组API来使用SQL操作客户端数据库。需要注意的是，HTML5已经放弃了Web SQL数据库。
SQL数据库规范中定义的三种核心方法:
OpenDatabase:该方法使用现有数据库或新数据库来创建数据库对象；事务:该方法允许我们根据情况控制事务的提交或回滚；ExecuteSql:该方法用于执行真正的Sql语句。
SQL的特性:
SQL可以方便对象存储；SQL支持事务，可以方便地进行数据查询和数据处理操作。
"示例"
var db = openDatabaseDb.transaction {//执行查询操作tx . Execute SQL ')；//执行插入操作tx . Execute SQL VALUES’)；tx . execute SQL VALUES ')；});复制代码
索引数据库
IndexedDB是一个底层API，用于客户端存储大量结构化数据，包括文件和二进制大对象。API使用索引来实现对这些数据的高性能搜索。尽管Web存储对于存储少量数据很有用，但这种方法对于存储大量结构化数据并不十分有用。IndexedDB提供了一个解决方案。
IndexedDB的特点:
存储空室大:存储空室可达数百兆甚至更多；支持二进制存储:不仅可以存储字符串，还可以存储二进制数据；IndexedDB有同源限制，每个数据库只能在自己的域名下访问，不能跨域名访问；事务支持:IndexedDB执行的操作将根据事务进行分组。在一个事务中，要么所有操作都成功，要么所有操作都失败；键值存储:IndexedDB使用对象仓库来存储数据。所有类型的数据都可以直接存储，包括Javascript对象。在对象仓库中，数据以“键-值对”的形式存储，每个数据记录都有一个对应的主键。主键是唯一的，不能重复，否则会抛出错误。操作是异步的:使用IndexedDB执行的操作是异步执行的，以避免阻塞应用程序。
"示例"
var dbName = " my _ dbvar request = indexedDB.openRequest.onerror = function {//错误处理}；request . onupgradereneed = function { var db = event . target . result；//建立一个对象仓库，存储我们客户的相关信息。我们选择ssn作为关键路径。//因为ssn可以保证是不重复的varobjectstore = db . createobjectstore；//建立一个索引，按名称搜索客户。名称可能会重复，因此我们不能使用唯一索引objectStore.createIndex//使用mailbox建立索引。我们确保客户的邮箱不会重复，所以我们使用唯一索引objectStore.createIndex//使用事务的oncomplete事件确保在插入数据之前已经创建了对象仓库；objectstore交易；on complete = function {//将数据保存到新创建的对象仓库varcustomerobjectstore = db交易；objectstorecustomer data . foreach { customer objectstore . add；});};};复制代码
空间有限。这里只介绍一些开源库，但也有一些其他成熟的开源库，比如lowdb、Lovefield、LokiJS等。如果你知道其他有趣的项目，请留言。
给大家分享一下我收集整理的各类学习资料的答案，小白娇的前端学习流程，入门教程等。-以下是学习资料的参考。
前端学习交流，自学，学习资料等推荐-知乎
