前端面试：F12之后的存储器‘F4’

1.引言

在面试时，关于浏览器的问题有一类是关于本地存储的问题。考察的是前端对浏览器的基础知识储备。

2.四大存储

F12->Application 后可以看到。(web sql 被废弃了)

F1 Cookie

• 简介 它是我们非常熟悉的一个名词。它是一个保存在客户机中的简单的文本文件, 这个文件与特定的 Web 文档关联在一起, 保存了该客户机访问这个Web 文档时的信息, 当客户机再次访问这个 Web 文档时这些信息可供该文档使用。由于“Cookie”具有可以保存在客户机上的神奇特性, 因此它可以帮助我们实现记录用户个人信息的功能。最常见的是登录时保存的账号，用户名等。

• 组成 由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成.其中secure和HTTpOnly被问的频率很高。其他属性：

  1.Expires:设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。
    Expires属性缺省时，为会话性Cookie
  2.Path：定义了Web站点上可以访问该Cookie的目录
  3.Secure：指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，
    可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。
    该方法也可用于Web站点的身份鉴别
  4.HTTPOnly：用于防止客户端脚本通过document.cookie属性访问Cookie，
    有助于保护Cookie不被跨站脚本攻击窃取或篡改
  

• 产生原因 ：这要牵涉到网络协议的特点：HTTP 协议是一个无状态协议，客户端向服务器发请求，服务器返回响应。第二次连接时就要重新带上身份信息，造成许多糟糕体验。所以cookie被设计出来优化http协议的请求。

• 特点：

  1.如同其名，容量是一块小饼干，只有4kb左右; 
  2.Cookie 紧跟域名，不管域名下面的某一个地址需不需要这个 Cookie ，
    请求都会携带上完整的 Cookie，这样随着请求数的增多，其实会造成巨大的性能浪费的;
  3.尽管设计了许多属性去保护cookie信息的安全，
  但由于 Cookie 以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，然后进行一系列的篡改
  

F2 localStorage

• 简介 :在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题，
• 特点:
  1. 大饼干 容量一般在5Mz左右，这个在不同的浏览器中localStorage会有所不同.
  2. 只存在客户端，默认不参与与服务端的通信。这样就很好地避免了 Cookie 带来的性能问题和安全问题
  3. 接口封装。通过localStorage暴露在全局，并通过它的setItem拿 和 getItem 取等方法进行操作，非常方便。

代码

let obj = { name: "Kasugano Sora", age:21 };
localStorage.setItem("name", "Kasugano Sora"); 
localStorage.setItem("info", JSON.stringify(obj));

let name = localStorage.getItem("name");
let info = JSON.parse(localStorage.getItem("info"));
//localStorage其实存储的都是字符串，如果是存储对象需要调用JSON的stringify方法，
//并且用JSON.parse来解析成对象

• 应用场景：利用localStorage的较大容量和持久特性，可以利用localStorage存储一些内容稳定的资源，

F3 sessionStorage

• 简介:它与localStorage有着亲缘关系，大体上相同。
• 特点：
  1. 有着localStorage的三个特点；
  2. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。比如你在打开一个页面时记录sessionStorage,当你把页面或者浏览器关闭时session中的数据即销毁
• 应用场景： 表单信息维护，敏感账号一次存储，本次浏览记录存储

F4 indexdb

• 简介 ：随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。IndexedDB从此产生，它是浏览器提供的本地数据库，它可以被网页脚本创建和操作，和传统的关系型数据不同的是，它是一个key-value型的数据库。value可以是复杂的结构体对象，key可以是对象的某些属性值也可以是其他的对象（包括二进制对象）。你可以使用对象中的任何属性做为index，以加快查找。
• 特点

  1. IndexedDB是自带transaction的，所有的数据库操作都会绑定到特定的事务上，并且这些事务是自动提交了，IndexedDB并不支持手动提交事务。

  2. IndexedDB API大部分都是异步的，在使用异步方法的时候，API不会立马返回要查询的数据，而是返回一个callback。异步API的本质是向数据库发送一个操作请求，当操作完成的时候，会收到一个DOM event，通过该event，我们会知道操作是否成功，并且获得操作的结果。

  3. 同源策略，每个源都会关联到不同的数据库集合，不同源是不允许访问其他源的数据库，从而保证了IndexedDB的安全性。

• 应用场景：网页固定大型数据的缓存（商品图片，音乐，小电影等），
• 操作手册：developer.mozilla.org/zh-CN/searc…

小结

• F4都是本地存储，都是为了减少请求时间，优化用户体验
• cookie 的重要属性要熟记，两种Stroage的基本操作语句可以多多练习
• 记忆时可以从大小，存在时长对比记忆
• index DB 独树一帜，更加复杂。一般问的不会太深入

本人大三，正寻实习，与君共勉，寥有拙作，万望指正