刷新时LocalStorage不保存

基础概念

LocalStorage 是 Web Storage API 的一部分，它提供了一种在用户的浏览器中存储键值对数据的方式。LocalStorage 中的数据没有过期时间，会一直保存在用户的浏览器中，直到被用户手动清除或者通过代码删除。

类型

LocalStorage 只有一种类型，即字符串。如果需要存储复杂数据类型（如对象或数组），需要先将其转换为字符串（通常使用 JSON.stringify），然后再存储。

应用场景

用户偏好设置：存储用户的界面偏好设置，如主题颜色、字体大小等。
缓存数据：存储一些不经常变化的数据，以减少网络请求。
会话状态：在多个页面之间共享一些状态信息。

问题：刷新时LocalStorage不保存

原因

代码逻辑错误：可能在刷新页面时，代码逻辑错误地删除了LocalStorage中的数据。
浏览器设置：某些浏览器设置可能会阻止LocalStorage的使用。
跨域问题：如果页面是跨域加载的，可能会影响LocalStorage的使用。

解决方法

检查代码逻辑：确保在刷新页面时没有删除LocalStorage中的数据。例如：
检查代码逻辑：确保在刷新页面时没有删除LocalStorage中的数据。例如：
检查浏览器设置：确保浏览器没有禁用LocalStorage。可以在浏览器的开发者工具中检查Storage选项卡，查看LocalStorage是否可用。
处理跨域问题：如果页面是跨域加载的，确保服务器端正确设置了CORS（跨域资源共享）头。例如，在服务器端设置：
处理跨域问题：如果页面是跨域加载的，确保服务器端正确设置了CORS（跨域资源共享）头。例如，在服务器端设置：

示例代码

以下是一个简单的示例，展示如何在页面加载时从LocalStorage中读取数据，并在刷新时保持数据不丢失：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LocalStorage Example</title>
</head>
<body>
    <h1>LocalStorage Example</h1>
    <input type="text" id="input" placeholder="Enter some text">
    <button onclick="saveData()">Save Data</button>
    <p id="display"></p>

    <script>
        // 加载数据
        window.onload = function() {
            const savedData = localStorage.getItem('key');
            if (savedData) {
                document.getElementById('display').innerText = savedData;
            }
        };

        // 保存数据
        function saveData() {
            const input = document.getElementById('input').value;
            localStorage.setItem('key', input);
            document.getElementById('display').innerText = input;
        }
    </script>
</body>
</html>