前端的经常使用存储方式｜ 8月更文挑战

1、本地存储localStoragecss

存储方式：键值对(key-value)的形式html

时间：永久（只要不手动删除就会一直存在）前端

大小：每一个域名5M面试

例如:
localStorage.token = "abecdssdgljgs;fgsdkgjls;dlk;sdgnsgf";
//获取记录
localStorage.getItem('token');
//存记录
localStorage.setItem('token','"abecdssdgljgs;fgsdkgjls;dlk;sdgnsgf');

//删记录
localStorage.removeItem('token');
复制代码

2、本地存储sessionStoragesql

用法与localStorage相同，不过存储时间是关闭浏览器就清空全部数据数据库

3、cookie后端

存储方式：纯文本，没有可执行代码浏览器

时间：能够设置，默认是会话结束的时候，当时间到期自动销毁缓存

大小：通常为4KBtomcat

个数：通常为20个

//客户端设置cookie
document.cookie = 'name=xiaojingyu';
document.cookie = 'name=xiaojingyu;domain=juejin.cn';//增长了生效域名的设置
//客户端可选配置：expires、domain、path、secure(只能在https协议的网页。客户端设置secure类型的cookie才能成功，但没法设置httpOnly选项)

//读取cookie,避免xss攻击，能获取非 HttpOnly 类型的cookie
document.cookie;会经过分号+空格的形式返回：name=xiaojingyu;
//修改cookie，path/domain这几个选项必定要旧cookie 保持一致。不然不会修改旧值，而是添加了一个新的 cookie
document.cookie = 'name=abc';
//删除cookie,与修改同样，path/domain这几个选项必定要旧cookie 保持一致
把过时时间改成今天之前就能够


//服务端设置cookie,由于这里只涉及前端，后端就一笔带过~
Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]
//一个set-Cookie字段只能设置一个cookie，当你要想设置多个 cookie，须要添加一样多的set-Cookie字段。
//服务端能够设置cookie 的全部选项：expires、domain、path、secure、HttpOnly
//经过 Set-Cookie 指定的这些可选项只会在浏览器端使用，而不会被发送至服务器端。
复制代码

4、离线缓存Application cache

本地缓存应用所需文件

配置：

<!DOCTYPE HTML><html manifest="demo.appcache">//内容</html>

manifest.txt
CACHE MANIFEST #将在首次下载后进行缓存的文件# 2021-08-01 v1.0.0/theme.css/main.js NETWORK: #与服务器的链接的文件，且不会被缓存index.html FALLBACK: #配置没法访问的页面，一般为404页面/html/ /offline.html


服务器配置：
manifest文件须要配置正确的MIME-type，即 "text/cache-manifest"。
tomcat:
<mime-mapping>
    <extension>manifest</extension>
    <mime-type>text/cache-manifest</mime-type>
</mime-mapping>
复制代码

API：

核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：

0（UNCACHED） : 无缓存，即没有与页面相关的应用缓存

1（IDLE） : 闲置，即应用缓存未获得更新

2 （CHECKING） : 检查中，即正在下载描述文件并检查更新

3 （DOWNLOADING） : 下载中，即应用缓存正在下载描述文件中指定的资源

4 （UPDATEREADY） : 更新完成，全部资源都已下载完毕

5 （IDLE） : 废弃，即应用缓存的描述文件已经不存在了，所以页面没法再访问应用缓存

5、数据库****indexedDB

索引数据库，经常使用于须要把不少数据存储在前端，这样减小与后端的交互，直接从本地存储数据。能够被网页的脚本建立并操做，能够存储大量数据，创建接口，查找索引。操做流程能够看这篇文章：传送门

注：不是关系型数据库，与后端数据库不太同样，不能使用sql语句进行查询。

记录一下常常面试问到的问题，正好参加一下8月更文挑战，5种类型的存储方式你们都要了解一下呀，可能写的不足，不喜勿喷，谢谢~