js 怎么缓存当前页面数据

JS缓存当前页面数据的方法有多种，包括使用LocalStorage、SessionStorage、IndexedDB等。其中，LocalStorage和SessionStorage是最常用的方法，分别用于长时间缓存和短时间缓存。以下是详细描述：

LocalStorage是一种持久化的缓存方法，即使用户关闭浏览器，数据依然会保留。相比之下，SessionStorage则是会话级别的缓存，数据仅在当前会话中有效，浏览器关闭后数据即会丢失。这两种方法都非常适合用于缓存当前页面的数据。

一、LOCALSTORAGE

1.1、什么是LocalStorage

LocalStorage是HTML5提供的一种在客户端存储数据的方式。它允许我们在浏览器中存储键值对，数据没有过期时间，除非手动删除。

1.2、使用场景

LocalStorage适用于需要长时间保存的数据，如用户偏好设置、主题选择、浏览历史等。它在浏览器关闭后依然存在。

1.3、基本操作

存储数据

localStorage.setItem('key', 'value');

读取数据

let data = localStorage.getItem('key');

删除数据

localStorage.removeItem('key');

清空所有数据

localStorage.clear();

1.4、具体应用示例

假设我们有一个表单，用户填写内容后想要缓存数据，以便下次访问时自动填充：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form with LocalStorage</title>
</head>
<body>
    <form id="userForm">
        <input type="text" id="username" placeholder="Username">
        <input type="email" id="email" placeholder="Email">
        <button type="button" onclick="saveFormData()">Save</button>
    </form>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('username').value = localStorage.getItem('username') || '';
            document.getElementById('email').value = localStorage.getItem('email') || '';
        });
        function saveFormData() {
            localStorage.setItem('username', document.getElementById('username').value);
            localStorage.setItem('email', document.getElementById('email').value);
            alert('Data saved!');
        }
    </script>
</body>
</html>

二、SESSIONSTORAGE

2.1、什么是SessionStorage

SessionStorage与LocalStorage类似，但它的数据仅在页面会话期间保存。页面会话在浏览器打开期间持续存在，并且即使重新加载页面或恢复页面也会保持不变。

2.2、使用场景

SessionStorage适用于需要在单个会话中临时保存的数据，例如表单数据、临时用户输入等。浏览器窗口或标签关闭后，数据即会丢失。

2.3、基本操作

存储数据

sessionStorage.setItem('key', 'value');

读取数据

let data = sessionStorage.getItem('key');

删除数据

sessionStorage.removeItem('key');

清空所有数据

sessionStorage.clear();

2.4、具体应用示例

假设我们有一个购物车页面，用户添加商品到购物车后，希望在当前会话中保留这些数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shopping Cart with SessionStorage</title>
</head>
<body>
    <button type="button" onclick="addToCart('item1')">Add Item 1</button>
    <button type="button" onclick="addToCart('item2')">Add Item 2</button>
    <div id="cart"></div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            displayCart();
        });
        function addToCart(item) {
            let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
            cart.push(item);
            sessionStorage.setItem('cart', JSON.stringify(cart));
            displayCart();
        }
        function displayCart() {
            let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
            document.getElementById('cart').innerHTML = cart.join(', ');
        }
    </script>
</body>
</html>

三、INDEXEDDB

3.1、什么是IndexedDB

IndexedDB是一种低级API，用于在客户端存储大量结构化数据。它允许创建、读取、修改和删除对象存储中的记录。

3.2、使用场景

IndexedDB适用于需要存储大量数据或复杂数据结构的场景，如离线应用、缓存大型数据集等。

3.3、基本操作

打开数据库

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

创建对象存储

request.onupgradeneeded = (event) => {
    let db = event.target.result;
    db.createObjectStore('myStore', { keyPath: 'id' });
};

添加数据

request.onsuccess = (event) => {
    let db = event.target.result;
    let transaction = db.transaction(['myStore'], 'readwrite');
    let store = transaction.objectStore('myStore');
    store.add({ id: 1, name: 'John Doe' });
};

读取数据

let transaction = db.transaction(['myStore']);
let store = transaction.objectStore('myStore');
let getRequest = store.get(1);
getRequest.onsuccess = (event) => {
    console.log(event.target.result);
};

3.4、具体应用示例

假设我们有一个离线笔记应用，用户可以在没有网络的情况下保存笔记：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Offline Notes with IndexedDB</title>
</head>
<body>
    <textarea id="note" placeholder="Write your note here..."></textarea>
    <button type="button" onclick="saveNote()">Save Note</button>
    <div id="notes"></div>
    <script>
        let db;
        document.addEventListener('DOMContentLoaded', () => {
            let request = indexedDB.open('notesDatabase', 1);
            request.onupgradeneeded = (event) => {
                db = event.target.result;
                db.createObjectStore('notesStore', { keyPath: 'id', autoIncrement: true });
            };
            request.onsuccess = (event) => {
                db = event.target.result;
                displayNotes();
            };
        });
        function saveNote() {
            let note = document.getElementById('note').value;
            let transaction = db.transaction(['notesStore'], 'readwrite');
            let store = transaction.objectStore('notesStore');
            store.add({ content: note });
            transaction.oncomplete = () => {
                document.getElementById('note').value = '';
                displayNotes();
            };
        }
        function displayNotes() {
            let transaction = db.transaction(['notesStore']);
            let store = transaction.objectStore('notesStore');
            let notes = [];
            store.openCursor().onsuccess = (event) => {
                let cursor = event.target.result;
                if (cursor) {
                    notes.push(cursor.value.content);
                    cursor.continue();
                } else {
                    document.getElementById('notes').innerHTML = notes.join('<br>');
                }
            };
        }
    </script>
</body>
</html>

四、使用CACHE API

4.1、什么是Cache API

Cache API是Service Worker的一部分，允许我们存储网络请求和响应。它通常用于缓存网络资源，以便实现离线功能或加快页面加载速度。

4.2、使用场景

Cache API适用于需要缓存网络资源的场景，如静态文件、API响应等。它可以显著提升应用的性能和用户体验。

4.3、基本操作

打开缓存

caches.open('myCache').then((cache) => {
    // cache operations
});

添加资源到缓存

caches.open('myCache').then((cache) => {
    cache.add('/path/to/resource');
});

读取缓存中的资源

caches.match('/path/to/resource').then((response) => {
    if (response) {
        return response.text();
    }
});

删除缓存

caches.delete('myCache');

4.4、具体应用示例

假设我们有一个离线网页应用，用户可以在没有网络的情况下访问一些静态资源：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Offline Web App with Cache API</title>
</head>
<body>
    <h1>Offline Web App</h1>
    <button type="button" onclick="cacheResources()">Cache Resources</button>
    <div id="content"></div>
    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/service-worker.js').then(() => {
                console.log('Service Worker registered');
            });
        }
        function cacheResources() {
            caches.open('myCache').then((cache) => {
                return cache.addAll([
                    '/',
                    '/index.html',
                    '/styles.css',
                    '/script.js'
                ]);
            }).then(() => {
                console.log('Resources cached');
            });
        }
        function fetchResource(resource) {
            caches.match(resource).then((response) => {
                if (response) {
                    return response.text().then((text) => {
                        document.getElementById('content').innerHTML = text;
                    });
                } else {
                    fetch(resource).then((response) => {
                        return response.text();
                    }).then((text) => {
                        document.getElementById('content').innerHTML = text;
                    });
                }
            });
        }
        document.addEventListener('DOMContentLoaded', () => {
            fetchResource('/index.html');
        });
    </script>
</body>
</html>

通过以上几种方法，可以根据具体需求选择合适的缓存策略，提升用户体验和应用性能。