【原】web开发常见的storage、cache

打开chrome开发者工具application，我们可以清楚的看到storage包含以下内容：

什么是cookie?

• cookie一般是由服务器用Set-Cookie 头给客户端一串字符串
• 客户端每次访问相同域名的网页时，必须带上这段字符串
• 客户端要在一段时间内保存这个Cookie
• Cookie 默认在用户关闭页面后就失效，后台代码可以任意设置 Cookie 的过期时间
• cookie存放于硬盘，通常大小为4KB
• 前端最好不要读写cookie
• 用户可以人为修改cookie

什么是session?

• 正是因为用户可以修改cookie,所以诞生出session,它是基于cookie的.
• session是服务器上的一块内存(hash表),保存了所有session
• session将 SessionID（随机数）通过 Cookie 发给客户端.客户端访问服务器时，服务器读取 SessionID
• 服务器再通过 SessionID 可以得到对应用户的隐私信息，如 id、email

什么是localstorage?

• LocalStorage 跟 HTTP 无关
• HTTP 不会带上 LocalStorage 的值
• 只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）
• 每个域名 localStorage 存储量一般为 5M
• 常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）
• LocalStorage 永久有效，除非用户清理缓存

什么是sessionstorage?

• sessionstorage是会话存储，跟localstorage功能相似，区别在于关闭浏览器窗口随即清除
• sessionstorage与session无关.

什么是cache-control?

• cache-control通常用于优化网页性能,适当使用可减少重复读取相同内容
• 可以在服务端setHeader设置cache-control
• 可以设置让该字段存于缓存中，浏览器下次访问时不发起请求，直接从缓存中读取该资源，比如我们的CDN的样式/脚本/图片就经常使用到

什么是IndexedDB?

• Indexed DB 的操作是异步的，不会阻塞主线程的执行，可以在 window、web workers、service workers 环境中使用。
• IndexedDB 是基于文件存储的，API 较为复杂，包含 v1 v2 的差异，建议通过类库来使用，比如：Dexie.js。

什么是ETag?

• ETag通常用于优化网页性能,适当使用可减少重复读取相同内容
• 可通过服务端setHeader设置etag为相应的字段的md5值
• 浏览器访问时,request.headers会带有if-none-match属性(为上述MD5),若不等于则说明服务器上的
  该资源与本地存储的该资源不相同,需要重新从服务器加载;若相等则说明两者资源相同,则直接从本地
  缓存获取.后端应设置statusCode=304.与cache-control不同的是:etag始终都要发请求和收响应,而
  cache-control不发请求.

Cookie、localStorage、sessionStorage区别

• 存储大小：Cookie4K，Storage5M
• 有效期：Cookie拥有有效期，Storage永久存储
• Cookie会发送到服务器端，存储在内存中，Storage只能存储在浏览器
• 路径：Cookie有路径限制，Storage只存储在域名下
• API：Cookie没有特定的API，Storage有对应的API

VUEX数据存储在哪里？

• 存放于内存
• 存储大小没有限制

 

参考文章

https://segmentfault.com/a/1190000038309852

https://www.jianshu.com/p/109ffcb0aca5

https://zhuanlan.zhihu.com/p/373190925