本地存储和缓存笔记

lizizzzz
485 阅读4分钟

这两块整理到一起。

客户端存储

vuex和redux 也可以算是客户端存储，不过刷新之后会丢失，需要结合本地存储方案。

Cookies

浏览器均支持，容量为4KB，存储有效时间有限制，每次进行请求的时候都会将它带上.使得每次的请求数据都会无意义的增大。Cookie设计之初就不是存数据用的.它只是为了让服务端验证用户身份。 分为两种

  • Session Cookie(会话期 Cookie)：会话期 Cookie 是最简单的Cookie，它不需要指定过期时间（Expires）或者有效期（Max-Age），它仅在会话期内有效，浏览器关闭之后它会被自动删除。
  • Permanent Cookie(持久性 Cookie)：与会话期 Cookie 不同的是，持久性 Cookie 可以指定一个特定的过期时间（Expires）或有效期（Max-Age）。

webStorage

  • LocalStorage：HTML5，容量为5M，理论上永久存储，可以用方法主动清除或者清浏览器缓存，同一浏览器下多个页面共享，同源策略不跨域。
  • SesstionStorage：HTML5，容量为5M，以会话（tab页）为基础存储，关闭tab清空，不能多个tab共享

浏览器发送请求不会带上web Storage里的数据，对于Object类型的数据需要用JSON.stringify()转换一下再存储。如果存储内容过多可能会影响浏览器速度，明文存储于application-storage,不能被爬虫抓取，且无痕模式下会影响存储。

最常用的方法（用api方法或者对象模式）：

localStorage/sessionStorage.setItem('name',value) 或者 xxx.name = value // 增改
xxx.getItem('name') 或者 xxx.name 对象模式 // 读取
xxx.removeItem('name') 或者 delete xxx.name  // 删除
xxx.clear() // 删除全部

客户端数据库

详情参考前端与SQL 对数据库的分析还是很不错的。

web SQL ，关系型数据库

IndexedDB，非关系型数据库。

IE10以上支持。具体类似于数据库操作，首先打开数据库idb.open，createObjectStore 之类...增删改查，可以处理复杂结构，大小几乎不受限制，取决于用户硬盘大小，个人没有用过。

其他不常用

  • UserData：仅IE支持，容量为64KB
  • Flash：100KB，非HTML原生，需要插件支持
  • Google Gears SQLite ：需要插件支持，容量无限制
  • globalStorage：Firefox独有的，Firefox13开始就不再支持这个方法

缓存

严格来说客户端数据存储并不算缓存，缓存是请求资源的副本，可以不用每次请求资源，提升性能，减少带宽消耗缓解服务器压力。

缓存可以分为强缓存和协商缓存。两者的主要区别是使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效，协商缓存验证，强缓存不验证，如果同时存在那就优先强缓存也就是不询问服务器。

浏览器缓存一般通过各类http头设置达成，用户可以清除缓存强制刷新，快捷键window下是Ctrl+F5,mac下是command+shift+R。

强缓存

强缓存常见这两种

  • Expires // 强缓存，http1.0 老版本，服务器和浏览器约定文件过期时间，过期时间之前浏览器直接使用缓存文件，不再向服务器请求。
  • Cache-Control // 强缓存，1.1定义的升级版，最常见设置max-age=xxx，表示在xxx秒内再次访问该资源，均使用本地的缓存，不再向服务器发起请求。
    比如返回200 (from disk cache)或是200 OK (from memory cache)
    Chrome会根据本地内存的使用率来决定缓存存放在哪，如果内存使用率很高，放在磁盘里面，内存的使用率很低会暂时放在内存里面。

协商缓存

在强缓存设置的过期时间到期之后浏览器的操作。

  • Last-Modified //第一次请求回来的这个值储存在If-Modified-Since 字段在之后的请求发给服务端，有修改返回200，没有则返回304 Not Modified，继续使用本地缓存。
    if-Unmodified-Since: 从某个时间点算起, 是否文件没有被修改，使用的是相对时间，不需要关心客户端和服务端的时间偏差。有修改返回200，没有则返回412 Precondition failed (预处理错误)
    缺点是单位为秒，对到底改了没有判断不准确。
  • ETag //文件内容的唯一 ID，文件内容变化etag 变化，计算规则由服务器指定。
    If-None-Match，比If-Modified-Since优先级高。
avatar
文章
阅读
粉丝