本地存储 local storage
问题的提出
- cookies 不适合存储大容量数据，因其基于http协议，每次连接均会在客户端和服务器之间被传输，网络压力很大
- cookies没有提供结构化的存储接口，完全基于字符串，操作不便
localStorage与sessionStorage
浏览器家族中最早支持的内置本地缓存技术
- localStorage： 持久化本地存储。除非主动删除数据，否则数据是永远不会过期的。
- sessionStorage 仅存储一个会话（session）中的数据，即只有在同一个会话中的页面，才能访问会话数据。并且当会话结束后数据也随之销毁
WebSQL与indexedDB
- 最新的HTML5本地缓存技术，拥有着比localStorage和sessionStorage更强大的功能
- 可以存储更多类型的数据，如数据流，图片，视频等
- WebSQL在浏览器中兼容性支持没有IndexedDB好
更多查看 https://www.jianshu.com/p/8cf47c755522
indexedDB
- 支持事务、游标、索引等数据库操作
- 存储空间大： IE的储存上限是250MB，Chrome和Opera是硬盘剩余空间的某个百分比，Firefox则没有上限。
- 持久化存储，清除浏览器缓存不会被删除（localStorage是会被删除的）
- 支持多种数据格式： arrayBuffer、String、Object、Array、File、Blob、ImageData等
- 不支持跨域： 但一个域中允许创建多个数据库
- 异步操作：，所有操作都需要在回调函数中完成
工具
const form = document.getElementById('formId');
form.addEventListener('submit', (e)=> {
e.preventDefault();
const inputVal = document.getElementById('inputId').value;
const dataToSend = {
val: `${inputVal} from lacal storage`
};
const dataToSend2 = {
val: `${inputVal} from session storage`
};
localStorage.setItem('objectToPass', JSON.stringify(dataToSend));
sessionStorage.setItem('objectToPass', JSON.stringify(dataToSend2));
location.href = "./pageTow.html";
});
- 支持localStorge、IndexedDB、WebSQL等多种浏览器本地存储地制，提供统一API接口 https://github.com/localForage/localForage