如何在网页中使用localStorage和sessionStorage？

提问者：demo2024.08.27浏览：1818

Javascript 问答

在网页中，localStorage 和 sessionStorage 是 Web Storage API 的一部分，用于在用户的浏览器中存储数据。它们的主要区别在于数据的持久性：

localStorage: 数据在浏览器关闭后仍然存在，直到被显式删除。
sessionStorage: 数据在浏览器标签页关闭后被删除。

使用方法

1. localStorage

存储数据:

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

获取数据:

const value = localStorage.getItem('key');

删除数据:

localStorage.removeItem('key');

清空所有数据:

localStorage.clear();

2. sessionStorage

存储数据:

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

删除数据:

sessionStorage.removeItem('key');

清空所有数据:

sessionStorage.clear();

示例

以下是一个简单的示例，展示如何使用 localStorage 和 sessionStorage：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Web Storage Example</title>  
</head>  
<body>  
    <h1>Web Storage Example</h1>  
    <input type="text" id="input" placeholder="Enter something">  
    <button id="saveLocal">Save to localStorage</button>  
    <button id="saveSession">Save to sessionStorage</button>  
    <button id="load">Load Data</button>  
    <button id="clear">Clear Data</button>  

    <script>  
        document.getElementById('saveLocal').onclick = function() {  
            const input = document.getElementById('input').value;  
            localStorage.setItem('myData', input);  
        };  

        document.getElementById('saveSession').onclick = function() {  
            const input = document.getElementById('input').value;  
            sessionStorage.setItem('myData', input);  
        };  

        document.getElementById('load').onclick = function() {  
            const localData = localStorage.getItem('myData');  
            const sessionData = sessionStorage.getItem('myData');  
            alert(`localStorage: ${localData}\nsessionStorage: ${sessionData}`);  
        };  

        document.getElementById('clear').onclick = function() {  
            localStorage.clear();  
            sessionStorage.clear();  
        };  
    </script>  
</body>  
</html>