js本地缓存怎么设置

使用JavaScript设置本地缓存的几种方法有：LocalStorage、SessionStorage、Cookie、IndexedDB。
其中，LocalStorage最为常用，因为它能够持久存储数据，除非手动清除，否则数据不会丢失。 下面将详细介绍LocalStorage的使用方法。

LocalStorage 是一种Web存储的方式，允许你在用户浏览器中保存键值对的数据。它非常适合存储一些持久性的数据，例如用户偏好设置、购物车信息等。与SessionStorage不同，LocalStorage的数据没有过期时间，除非手动删除。

一、LocalStorage的基本操作

1、设置数据

要将数据存储到LocalStorage中，可以使用setItem方法。该方法接受两个参数：键和值。值得注意的是，LocalStorage只能存储字符串类型的数据，如果你要存储对象或数组，需要先将其转换为字符串。

localStorage.setItem('username', 'JohnDoe');

localStorage.setItem('cartItems', JSON.stringify([{id: 1, name: 'item1'}, {id: 2, name: 'item2'}]));

2、获取数据

从LocalStorage中读取数据，可以使用getItem方法。该方法接受一个参数，即你存储数据时使用的键。如果对应的键不存在，则返回null。

const username = localStorage.getItem('username');

const cartItems = JSON.parse(localStorage.getItem('cartItems'));

3、删除数据

要从LocalStorage中删除某个键值对，可以使用removeItem方法。该方法接受一个参数，即你要删除的键。

localStorage.removeItem('username');

4、清空所有数据

如果你想清空LocalStorage中的所有数据，可以使用clear方法。

localStorage.clear();

二、SessionStorage的基本操作

SessionStorage与LocalStorage类似，但它的数据仅在页面会话期间可用。页面会话在页面被打开时创建，并在页面被关闭时结束。SessionStorage的使用方法与LocalStorage几乎相同。

1、设置数据

sessionStorage.setItem('sessionKey', 'sessionValue');

2、获取数据

const sessionValue = sessionStorage.getItem('sessionKey');

3、删除数据

sessionStorage.removeItem('sessionKey');

4、清空所有数据

sessionStorage.clear();

三、Cookie的基本操作

Cookies是另一种存储数据的方法，适用于需要与服务器进行交互时存储数据。Cookies通常用于存储会话数据、用户认证信息等。

1、设置Cookie

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2021 12:00:00 UTC; path=/";

2、获取Cookie

function getCookie(name) {

    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}
const username = getCookie('username');

3、删除Cookie

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

四、IndexedDB的基本操作

IndexedDB是一个低级API，用于客户端存储大量结构化数据，包括文件和二进制数据。IndexedDB比LocalStorage和SessionStorage更为复杂，但也更为强大。

1、打开数据库

const request = indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
    console.log('Database error: ' + event.target.errorCode);
};
request.onsuccess = function(event) {
    const db = event.target.result;
    // 进一步操作数据库
};

2、创建对象存储

request.onupgradeneeded = function(event) {

    const db = event.target.result;
    const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
    objectStore.createIndex('name', 'name', { unique: false });
    objectStore.createIndex('email', 'email', { unique: true });
};

3、添加数据

const transaction = db.transaction(['customers'], 'readwrite');

const objectStore = transaction.objectStore('customers');
const request = objectStore.add({ id: 1, name: 'John Doe', email: 'john.doe@example.com' });
request.onsuccess = function(event) {
    console.log('Customer has been added to your database.');
};
request.onerror = function(event) {
    console.log('Unable to add data, it already exists in your database!');
};

4、读取数据

const transaction = db.transaction(['customers']);

const objectStore = transaction.objectStore('customers');
const request = objectStore.get(1);
request.onsuccess = function(event) {
    if (request.result) {
        console.log('Name: ' + request.result.name);
        console.log('Email: ' + request.result.email);
    } else {
        console.log('No data record found!');
    }
};

5、删除数据

const transaction = db.transaction(['customers'], 'readwrite');

const objectStore = transaction.objectStore('customers');
const request = objectStore.delete(1);
request.onsuccess = function(event) {
    console.log('Customer has been removed from your database.');
};

五、总结

不同的本地存储方式有各自的优缺点和适用场景。LocalStorage适合存储持久性的数据，SessionStorage适合存储临时数据，Cookie适合与服务器进行数据交互，而IndexedDB则适合存储大量的结构化数据。根据具体需求选择合适的存储方式，可以更有效地管理和使用数据。

相关问答FAQs：

1. 什么是本地缓存？
本地缓存是指在浏览器中存储数据的一种机制，可以在用户离线或重新访问网页时快速加载数据，提高用户体验。

2. 如何使用JavaScript设置本地缓存？
要设置本地缓存，可以使用JavaScript的localStorage对象。通过将数据存储在localStorage中，可以在浏览器关闭后仍然保留数据。

3. 如何设置本地缓存的过期时间？
本地缓存默认情况下是永久存储的，但是我们也可以设置缓存的过期时间。可以在存储数据时同时存储一个过期时间戳，在读取数据时判断当前时间是否超过了过期时间，如果超过则清除缓存数据。这样可以确保数据不会过期。