JS本地持久化

2023-12-28 09:11:33

要将数据持久化到本地存储中,可以使用浏览器提供的localStorageindexedDB等机制。下面分别介绍这两种方式的用法:

  1. 使用localStorage

    // 存储数据
    localStorage.setItem('key', 'value');
    
    // 获取数据
    const data = localStorage.getItem('key');
    
    // 删除数据
    localStorage.removeItem('key');
    

    localStorage提供了setItem方法来存储数据,getItem方法来获取数据,removeItem方法来删除数据。存储的数据将以键值对的形式存储在浏览器的本地存储中,并且在浏览器关闭后仍然可用。

  2. 使用indexedDB

    // 打开数据库
    const request = window.indexedDB.open('database', 1);
    
    // 监听数据库打开成功事件
    request.onsuccess = function(event) {
      const db = event.target.result;
    
      // 创建事务
      const transaction = db.transaction(['store'], 'readwrite');
    
      // 获取存储对象
      const store = transaction.objectStore('store');
    
      // 存储数据
      store.put('value', 'key');
    
      // 获取数据
      const getRequest = store.get('key');
      getRequest.onsuccess = function(event) {
        const data = event.target.result;
        console.log(data);
      };
    
      // 删除数据
      store.delete('key');
    };
    

    使用indexedDB需要先打开数据库,并创建事务和存储对象,然后可以使用存储对象的put方法来存储数据,get方法来获取数据,delete方法来删除数据。indexedDB是一种更底层的存储机制,相比于localStorage提供了更多的功能和灵活性。

选择使用localStorage还是indexedDB取决于你的具体需求。如果只是简单地存储少量的数据,并且不需要进行复杂的查询操作,localStorage是一个简单方便的选择。如果需要存储大量的数据,并进行复杂的查询和索引,则可以考虑使用indexedDB

文章来源:https://blog.csdn.net/m0_62943934/article/details/135254619
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。