# 前端缓存技术

# SessionStorage

sessionStorage.setItem("keys","values");     // 设置值
sessionStorage.getItem("keys");              // 获取值
sessionStorage.getItem.keys;                 // 获取值
sessionStorage.clear();                      // 清除

优点：临时存储神器，关闭页面标签自动回收，不可以跨页面交互。
缺点：临时成也萧何败也萧何，因为是临时所以不能存储只就花的东西。

# userData

优点：第一个吃螃蟹的人，也得感谢第一个被吃的螃蟹。
缺点：存储限制大小，单个文件的大小限制是 128KB，一个域名下总共可以保存 1024KB 的文件，文件个数应该没有限制。在受限站点里面这个值分别是 64KB 和 640KB。

# Cookie

优点：兼容性最好，几乎所有的浏览器都支持。
缺点：大小有限制、而且每次发送请求，请求头里会带着 Cookie 一起发过去，现在基本大多登录的合法性验证都用 Cookie 验证的。

# openDatabase

优点：就是一个完整的数据库。
缺点：肯能对前端同学来说，成本高。

# localstorage

localStorage.setItem("keys","values");     // 设置值
localStorage.getItem("keys");              // 获取值
localStorage.getItem.keys;                 // 获取值
localStorage.clear();                      // 清除

优点：兼容性中等，操作简单，就是 key-value 形式，几乎现代的浏览器都支持。
缺点：存储大小限制，IE9、IE10不支持。

常用浏览器的大小