JS中的localStorage和sessionStorage|极客笔记

JS中的localStorage和sessionStorage

在Web开发中，为了使用户在不同页面之间能够共享数据或者保留数据，需要使用一些存储机制。其中，localStorage和sessionStorage就是Web开发中常用的两种客户端存储方式。

1. localStorage和sessionStorage的区别

localStorage和sessionStorage都是用于在浏览器端存储数据的工具，但它们具有一些不同之处。

localStorage:
- 存储数据的生命周期是永久的，除非用户清除浏览器缓存（或者通过代码删除特定的数据）。
- 存储的数据是在同源的所有页面中共享的。
- 可以存储的数据大小一般为5MB。
sessionStorage:
- 存储数据的生命周期是在当前窗口或标签页被关闭之前。
- 存储的数据仅在当前页面有效，不同页面之间的数据是隔离的。
- 可以存储的数据大小一般为5MB。

2. 使用localStorage和sessionStorage

2.1 存储数据

// 使用localStorage存储数据
localStorage.setItem('username', 'John Doe');

// 使用sessionStorage存储数据
sessionStorage.setItem('token', '1234567890');

2.2 读取数据

// 从localStorage读取数据
const username = localStorage.getItem('username');
console.log(username); // 输出 John Doe

// 从sessionStorage读取数据
const token = sessionStorage.getItem('token');
console.log(token); // 输出 1234567890

2.3 删除数据

// 从localStorage删除数据
localStorage.removeItem('username');

// 从sessionStorage删除数据
sessionStorage.removeItem('token');

2.4 清空数据

// 清空localStorage中的所有数据
localStorage.clear();

// 清空sessionStorage中的所有数据
sessionStorage.clear();

3. 示例应用

下面是一个使用localStorage存储用户偏好设置的示例应用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Settings</title>
</head>
<body>
<h1>User Settings</h1>
<label>
    <input type="checkbox" id="darkMode"> Dark Mode
</label>
<br>
<label>
    <input type="checkbox" id="notifications"> Notifications
</label>

<script>
    const darkModeCheckbox = document.getElementById('darkMode');
    const notificationsCheckbox = document.getElementById('notifications');

    // 初始化用户设置
    if(localStorage.getItem('darkMode') === 'true') {
        darkModeCheckbox.checked = true;
        document.body.style.backgroundColor = '#333';
        document.body.style.color = '#fff';
    }

    if(localStorage.getItem('notifications') === 'true') {
        notificationsCheckbox.checked = true;
    }

    // 监听复选框变化事件
    darkModeCheckbox.addEventListener('change', function() {
        if(darkModeCheckbox.checked) {
            localStorage.setItem('darkMode', 'true');
            document.body.style.backgroundColor = '#333';
            document.body.style.color = '#fff';
        } else {
            localStorage.removeItem('darkMode');
            document.body.style.backgroundColor = '#fff';
            document.body.style.color = '#333';
        }
    });

    notificationsCheckbox.addEventListener('change', function() {
        if(notificationsCheckbox.checked) {
            localStorage.setItem('notifications', 'true');
        } else {
            localStorage.removeItem('notifications');
        }
    });
</script>
</body>
</html>

在这个应用中，用户可以选择是否启用暗黑模式和通知功能，并且这些偏好设置会被存储在localStorage中，这样即使用户关闭页面，下次访问时也会保留之前的选择。