前台存储

前台存储有 LocalStorage和cookies,其实对于在浏览器里存储数据，你可以使用LocalStorage和cookies,但他们都是简单的。

1.cookies

每次HTTP接受和发送都会传递cookies数据，会占用额外的流量。例：如果你有10kb的cookies数据，发送10次请求，那么就会有100kb的数据在网络上传输。 cookies只能是字符串 。浏览器里存储cookies的空间有限，很多用户禁止浏览器使用cookies，所以cookies只能用来存储小量的非关系型数据，cookies大小不超过4k。

---

2.LocalStorage

LocalStorage用key-value键值存储数据，它的数据不是按照对象形式存储，它存储的数据都是字符串形式的，如果想让LocalStorage存储对象用JSON.Stringify()将对象转变为字符串的形式，再用JSON.Parse()将字符串还原为对象，[如果存储大量复杂的数据这不是一个好的方案]LocalStorage专门为小的数量数据设计的，所以他的API是同步的，LocalStorage(2.5MB~10MB)不提供搜索功能，不能建立自定义的索引。

localStorage对象的设置
var storage = window.localStorage ;
1.storage['username'] = 'zzz';
2.storage.setItem('username','zzz');
3.storage.username = 'zzz';

获取
var storage = window.localStorage ;
1.storage['username'];
2.storage.getItem('username');
3.storage.username;
storage.key(index);                   遍历返回的key

删除
1.storage.removeItem(key);            无返回值，一次删一条，没有对应的key不执行任何操作
2.storage.clear;                      删除同源存储列表中的所有数据

———————————————————————————————————————————————————————————————————————————————————————————
openDialog('url','name','arg1','arg2');
url:在新窗户打开的地址
name:打开的页面
arg1,arg2:参数1，参数2

例如：
HTML：<button id="addToTable" onclick="add()" class="btn btn-primary waves-effect waves-light" style="float:right;">添加 <i class="fa fa-plus"></i></button>
JS：//新增
function add(){
    var storage=window.localStorage;
    storage["companyId"]=companyId;
    storage["userPower"]=userPower;
    storage["editType"]='0';
    openDialog('添加账号','adminInfoEdit.html','70%','70%');
}
/*这是一个方法（点击添加按钮时）把companyId，userPower，0 分别赋值给companyId，userPower，editType 传到下一个页面*/

adminInfoEdit.html：
/*打开的页面localStorage操作*/
 var storage=window.localStorage;
    editType = storage["editType"];
    thisId = storage["thisId"];
    companyId = storage["companyId"];
    userpower = storage["userPower"];
    storage.removeItem('editType');
    storage.removeItem('thisId');
    storage.removeItem('companyId');
    storage.removeItem('userPower');
/*先赋值然后根据key删除对应的值*/

/**
 * 打开对话框(添加修改)  
 * @param title
 * @param url
 * @param width
 * @param height
 */
function openDialog(title,url,width,height){
    if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端，就使用自适应大小弹窗
        width='auto';
        height='auto';
    }else{//如果是PC端，根据用户设置的width和height显示。

    }

---

3.indexDB

indexDB适合存储大量数据（使用索引存储数据）各种数据库操作放在事务中处理，indexDB比LocalStorage强大的多，但它的API复杂，API异步调用。（简单的数据用LocalStorage，存储大量的数据用indexDB更合适）

详情如下：

https://blog.csdn.net/weixin_43136017/article/details/84257558