Html5本地存储

2021-03-05  本文已影响0人  菜蚴菜

一、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

上一篇下一篇

猜你喜欢

热点阅读