Enhanfe

Expires: Wed, 11 May 2018 07:20:00 GMT

Cache-Control: max-age=315360000

// 保存数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
// 读取数据
localStorage.getItem('key');
sessionStorage.getItem('key');
// 删除单个数据
localStorage.removeItem('key');
sessionStorage.removeItem('key');
// 删除全部数据
localStorage.clear();
sessionStorage.clear();
// 获取索引的key
localStorage.key('index');
sessionStorage.key('index');

window.addEventListener('storage', function(e) {
  console.log(e.key, e.oldValue, e.newValue);
});

const DB_NAME = 'Netease';
const DB_VERSION = 1;
const OB_NAMES = {
  UseKeyPath: 'UseKeyPath',
  UseKeyGenerator: 'UseKeyGenerator',
};

function openIndexDB() {
  // The call to the open() function returns an IDBOpenDBRequest object with a result (success) or error value that you handle as an event.
  return new Promise((resolve, reject) => {
    /**
     * NOTE:
     * 1. 第一次打开可能会提示用户获取 indexDB 的权限
     * 2. 浏览器隐身模式不会存在本地，只会存储在内存中
     */
    const request = window.indexedDB.open(DB_NAME, DB_VERSION);
    request.onerror = function(event) {
      // Do something with request.errorCode!
      console.log('open request failed', event);
      console.error(event.target.error);
    };
    request.onsuccess = function(event) {
      // Do something with request.result!
      // console.log('open request success', event)
      var db = event.target.result;
      db.onerror = function(e) {
        console.error('Database error: ', e.target.error);
        reject(e.target.error);
      };
      db.onclose = e => {
        console.error('Database close:', e.target.error);
        reject(e.target.error);
      };
      resolve(db);
    };
    request.onupgradeneeded = function(event) {
      /**
       * NOTE:
       * 1. 创建新的 objectStore
       * 2. 删除旧的不需要的 objectStore
       * 3. 如果需要更新已有 objectStore 的结构，需要先删除原有的 objectStore ，然后重新创建
       */
      // The IDBDatabase interface
      console.log('onupgradeneeded', event);
      var db = event.target.result; // Create an objectStore for this database
      obUseKeypath(db);
      obUseKeyGenerator(db);
      /**
       * NOTE:
       * transaction
       * 三个事件：
       * 1. error
       * 2. abort
       * 3. complete
       * 两个方法：
       * 1. abort
       * Rolls back all the changes to objects in the database associated with this transaction. If this transaction has been aborted or completed, then this method throws an error event.
       * 2. objectStore
       * Returns an IDBObjectStore object representing an object store that is part of the scope of this transaction.
       */
      db.transaction.oncomplete = function(e) {
        console.log('obj create success', e);
      };
    };
  });
}

function obUseKeypath(db) {
  const objectStore = db.createObjectStore(OB_NAMES.UseKeyPath, {
    keyPath: 'time',
  });
  objectStore.createIndex('errorCode', 'errorCode', {
    unique: false,
  });
  objectStore.createIndex('level', 'level', {
    unique: false,
  });
}

function obUseKeyGenerator(db) {
  const objectStore = db.createObjectStore(OB_NAMES.UseKeyGenerator, {
    autoIncrement: true,
  });
  objectStore.createIndex('errorCode', 'errorCode', {
    unique: false,
  });
  objectStore.createIndex('time', 'time', {
    unique: true,
  });
  objectStore.createIndex('level', 'level', {
    unique: false,
  });
}

/**
 * 添加数据
 * @param {array} docs 要添加数据
 * @param {string} objName 仓库名称
 */
function addData(docs, objName) {
  if (!(docs && docs.length)) {
    throw new Error('docs must be a array!');
  }
  return openIndexDB().then(db => {
    const tx = db.transaction([objName], 'readwrite');
    tx.oncomplete = e => {
      console.log('tx:addData onsuccess', e);
      return Promise.resolve(docs);
    };
    tx.onerror = e => {
      e.stopPropagation();
      console.error('tx:addData onerror', e.target.error);
      return Promise.reject(e.target.error);
    };
    tx.onabort = e => {
      console.warn('tx:addData abort', e.target);
      return Promise.reject(e.target.error);
    };
    const obj = tx.objectStore(objName);
    docs.forEach(doc => {
      const req = obj.add(doc);
      req.onerror = e => {
        console.error('obj:addData onerror', e.target.error);
      };
    });
  });
}

const TestData = [
  {
    event: 'NE-TEST1',
    level: 'warning',
    errorCode: 200,
    url: 'http://www.example.com',
    time: '2017/11/8 下午4:53:039',
    isUploaded: false,
  },
];

addData(TestData, OB_NAMES.UseKeyGenerator).then(() =>
  addData(TestData, OB_NAMES.UseKeyPath),
);