存储容量 cookie(4kb) < storage(2.5M~10M) < indexedDB

cookie

    实际开发中没有用到过cookie,不过网上说这个是存用户名和密码。话不多说，开撸。
这是原生js写的，不过用jquery更方便（这里不多介绍）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 函数中的参数分别为 cookie 的名称、值以及过期天数---存
setCookie(c_name, value, expiredays) {
    let exdate = new Date(c_name, value, expiredays);
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = c_name + "=" + escape(value) +
        ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
},
//根据name来取值
getCookie(c_name) {
    if (document.cookie.length > 0) {
        let c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            let c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }

            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
},

storage

sessionStorage

    浏览器关闭就消失

1
2
3
sessionStorage.setItem('name','lufangzhou')
//后面参数只支持string类型，json类型需要用JSON.stringify('json')转一下
console.log(sessionStorage.getItem('name'))//输出lufangzhou

loacalStorage

     浏览器关闭也存在，只要不手动清除数据 就一直存在，

1
2
3
localStorage.setItem('name','lufangzhou')
//后面参数只支持string类型，json类型需要用JSON.stringify('json')转一下
console.log(localStorage.getItem('name'))//输出lufangzhou

indexDB

1
2
3
4
5
6
//先定义个数据库
let myDB = {
           name: 'testDB',
           version: 2,//数据库版本
           db: null
 }

打开与创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* name -> myDB.name
* ver -> myDB.version
*/
openDB(name, ver) {
              let version = ver || 1
              let request = window.indexedDB.open(name, version)
              //失败
              request.onerror = (e) => {
                  console.log('open error!');
              }
              //成功
              request.onsuccess = (e) => {
                  this.myDB.db = e.target.result
                  //console.log(216, 'create success');
              }
              //当我们传入的版本号和数据库当前版本号不一致的时候onupgradeneeded就会被调用
              request.onupgradeneeded = (e) =>{
                  console.log(`DB version changed to ${version}`);
              }
              console.log(217, this.myDB);
          },

关闭与删除

1
2
3
4
5
6
7
8
9
10
11
12
/**
* db -> myDB.db
* name -> myDB.name
*/
//关闭
closeDB(db){
            db.close()
            },
//删除
deleteDB(name){
            window.indexedDB.deleteDatabase(name)
          }