浏览器H5下存储浅析

类型	特性	存储容量	接口API
Cookie	● 存储用户信息，获取数据需要与服务器建立连接。 ● 可存储的数据有限，且依赖于服务器，无需请求服务器的数据尽量不要存放在cookie中，以免影响页面性能。 ● 可设置过期时间。	● 最好将cookie控制在4095B以内，超出的数据会被忽略。 ● IE6或更低版本最多存20个cookie； ●IE7及以上版本最多可以有50个；Firefox最多50个； ●chrome和Safari没有做硬性限制。	原生、$.cookie（详见上文）
Local Storage	● 存储客户端信息，无需请求服务器。 ● 数据永久保存，除非用户手动清理客户端缓存。 ● 开发者可自行封装一个方法，设置失效时间。	5M左右，各浏览器的存储空间有差异。	// 保存数据到 localStorage localStorage.setItem('key', 'value'); // 从 localStorage 获取数据 let data = localStorage.getItem('key'); // 从 localStorage 删除保存的数据 localStorage.removeItem('key'); // 从 localStorage 删除所有保存的数据 localStorage.clear();
Session Storage	● 存储客户端信息，无需请求服务器。 ● 数据保存在当前会话，刷新页面数据不会被清除，结束会话（关闭浏览器、关闭页面、跳转页面）数据失效。	5M左右，各浏览器的存储空间有差异。	// 保存数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem('key'); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem('key'); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear();
indexedDB	● 存储客户端信息，无需请求服务器。 ● 数据永久保存，存储大量数据，除非用户手动清理客户端缓存。 ●类似NoSQL数据库，	存储空间可以说无限制	●是否支持： window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; if(!window.indexedDB){ console.log("你的浏览器不支持IndexedDB"); } ●创建var request = window.indexedDB.open("testDB", 2)
Web SQL	● 存储客户端信息，无需请求服务器。 ● 数据永久保存，存储大量数据，除非用户手动清理客户端缓存。 ●类似关系数据库，支持SQL查询 ●关系数据结构性太强，不可能兼容各个浏览器。已经被indexedDB替代，被弃用	存储空间可以说无限制	●创建：var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024); 参考： https://www.cnblogs.com/kalkin/p/11211955.html