Html5本地存储

一、cookie（具体cookie的内容见文章）

使用场景，用户状态管理
1.存储大小限制 仅4k左右，且每次请求都会发送回服务器
2.单域名数量限制 50个左右
3.污染请求头，浪费流量

二、localStorage 和 sessionStorage

用法

1.使用setItem方法设置存储内容
2.使用getItem方法获取存储内容
3.使用removeItem方法删除存储内容
4.使用clear方法清除所有内容
5.使用length属性获取存储内容的个数
6.使用key方法获取存储字段
localStorage持久化，不会随着浏览器的关闭而失效，存储在硬盘中， 2.5MB 到 10MB 之间（各家浏览器不同）。可以设置数据的存储时间，过期数据清理，自行维护存储空间。不提供搜索功能，不能建立自定义的索引。
sessionStorage会随着网页会话结束而失效，存储在内存中。存储流量不一，部分浏览器不设限。

注意点

1.注意存储容量超出配额 超出后会抛出异常
2.存储类型的限制，仅能存储字符串 隐式的类型转换
3.sessionStorage失效机制
-刷新页面不会失效
-同一个域名下的不同标签不共享

三、indexedDB数据库

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

特点

（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
（4）同源限制。 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
（5）储存空间大。 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

对象接口关系

关系图.png

简单事例

以数据库dataObj为例，创建一个person仓库，索引为name
1、打开或创建一个数据库

 // 兼容性写法
  window.indexedDB =
    window.indexedDB ||
    window.mozIndexedDB ||
    window.webkitIndexedDB ||
    window.msIndexedDB;
  window.IDBTransaction =
    window.IDBTransaction ||
    window.webkitIDBTransaction ||
    window.msIDBTransaction;
  window.IDBKeyRange =
    window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
  // 兼容性写法

  //打开或者新建数据库，如果数据库存在的时候就是打开，不存在的时候就是新建
  //传入数据库的名称和版本号，版本号为整数如果省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为1
  //这是一个异步操作，但是会立刻返回一个 IDBOpenDBRequest 对象。
  var request = window.indexedDB.open('dateObj', 1);
  //删除数据库,调用deleteDatabase()方法以后，当前数据库的其他已经打开的连接都会接收到versionchange事件。
  // window.indexedDB.deleteDatabase(databaseName);

  // 新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。
  // 不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件。
  var db;//数据库IDBDatabase对象
  request.onupgradeneeded = function (event) {
    console.log('新建数据库')
    db = event.target.result;
    var objectStore;
    if (!db.objectStoreNames.contains('person')) { //检查数据库是否包含该对象仓库
      // 只能在onupgradeneeded回调函数中创建存储空间，而不能在数据库打开后的success回调函数中创建。
      // 删除仓库对象（删除表格） db.deleteObjectStore(objectStoreName);
      // db.close()：关闭数据库连接，实际会等所有事务完成后再关闭。
      objectStore = db.createObjectStore('person', {
        keyPath: 'id', //keyPath表示主键，（由于主键的值不能重复，所以上例存入之前，必须保证数据的email属性值都是不一样的），默认值为null
        autoIncrement: true
        //autoIncrement属性表示，是否使用自动递增的整数作为主键（第一个数据记录为1，第二个数据记录为2，以此类推），默认为false。
        //一般来说，keyPath和autoIncrement属性只要使用一个就够了，如果两个同时使用，表示主键为递增的整数，且对象不得缺少keyPath指定的属性。
      });
      // IDBObject.createIndex()的三个参数分别为索引名称、指定根据存储数据的哪一个属性来构建索引、配置对象（说明该属性是否包含重复的值）。
      //新建索引
      objectStore.createIndex('name', 'name', {
        unique: false//true的话表示不允许有重复的值
      });
      // 删除索引：objectStore.deleteIndex()
      // 获取所有索引对象：objectStore.index()
    }
     // 如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded
     request.onupgradeneeded = function (event) {
      db = event.target.result;
    }

    //失败事件
    request.onerror = function (event) {
      console.log('数据库打开报错');
    };

    //成功事件
    request.onsuccess = function (event) {
      db = event.target.result;
      //无论是创建还是打开数据库，最后都会进入onsuccess
      console.log('数据库打开成功');
    }; 
  }

2、向person对象仓库写入数据记录

function add(db, name) {
  // 事务函数transaction的第一个参数为需要关联的存储空间，第二个可选参数为事务模式。
  // readonly（只读）和readwrite（读写）。添加数据使用readwrite，读取数据使用readonly。
  // 第二个参数是可选的，省略时默认为readonly模式。
  console.log('db', db.transaction(['person'], 'readwrite'))
  var req = db.transaction(['person'], 'readwrite').objectStore('person').add({
    name: name,
    age: 29,
    email: 'zhangsan@example.com'
  });

  req.onsuccess = function (event) {
    console.log('db', db)
    console.log('数据写入成功');
  };

  req.onerror = function (event) {
    console.log('event', event)
    console.log('数据写入失败');

  }
}

3、在person对象仓库读取数据记录

function read(db) {//读取一条
  var transaction = db.transaction(['person']);
  var objectStore = transaction.objectStore('person');
  var request = objectStore.get(1);//用主id去获取到对应的值

  request.onerror = function (event) {
    console.log('事务失败');
  };

  request.onsuccess = function (event) {
    if (request.result) {
      console.log('Name: ' + request.result.name);
      console.log('Age: ' + request.result.age);
      console.log('Email: ' + request.result.email);
    } else {
      console.log('未获得数据记录');
    }
  };
}
//使用索引获取到具体的值
function readItem(db, name) {
  var store = db.transaction(['person'], 'readonly')
    .objectStore('person')
  var index = store.index('name')
  // var request=index.count(name)//符合索引的值的数量
  // var request=index.get(name)//只能获取到第一个匹配到的值
  // var request=index.getAll(name)//获取到所有匹配到的值
  // var request=index.getKey(name)//获取到第一个匹配到的值的主键的值
  // var request=index.getAllKeys(name)//获取到所有匹配到的值的主键的值
  var request = index.openCursor(name)
  request.onsuccess = function (e) {
    var result = e.target.result
    console.log('result', result)
  };
}
function readAll(db) {//读取全部
  var objectStore = db.transaction('person').objectStore('person');
  // objectStore.openCursor()用于获取一个指针对象。
  // objectStore.openKeyCursor()用于获取一个主键指针对象。
  objectStore.openCursor().onsuccess = function (event) {
    var cursor = event.target.result;

    if (cursor) {
      console.log('Id: ' + cursor.key);
      console.log('Name: ' + cursor.value.name);
      console.log('Age: ' + cursor.value.age);
      console.log('Email: ' + cursor.value.email);
      cursor.continue();
    } else {
      console.log('没有更多数据了！');
    }
  };
}

4、在person对象仓库更新数据记录

function update(db) {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .put({
      id: 1,
      name: '李四',
      age: 35,
      email: 'lisi@example.com'
    });

  request.onsuccess = function (event) {
    console.log('数据更新成功');
  };

  request.onerror = function (event) {
    console.log('数据更新失败');
  }
}

5、在person对象仓库删除数据记录

function remove(db) {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .delete(1);

  request.onsuccess = function (event) {
    console.log('数据删除成功');
  };
}

四、参考文章

1、http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
2、https://www.kancloud.cn/dodoke/html5-tutorial/1536642