怎么让页面刷新后js代码还在

要让页面刷新后 JavaScript 代码仍然有效，可以使用本地存储、会话存储、Cookies、URL 参数等方法来保存数据、状态，确保重新加载页面时 JavaScript 代码能继续执行。本文将详细介绍这些方法，并提供一些代码示例和实际应用场景。

一、本地存储

本地存储（LocalStorage）是 HTML5 提供的一种在客户端存储数据的方法。与 Cookies 不同，本地存储的容量更大，且数据不会随浏览器会话关闭而丢失。以下是一些详细介绍：

1、使用本地存储保存数据

本地存储可以保存字符串格式的数据，因此在保存对象时需要将其转化为 JSON 字符串格式。以下是一个简单的示例：

// 保存数据
localStorage.setItem('username', 'JohnDoe');
// 获取数据
var username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe

2、使用本地存储保存状态

除了保存数据，我们还可以使用本地存储保存页面的状态。例如，保存用户在页面上的滚动位置，当用户刷新页面时可以恢复到之前的滚动位置：

// 保存滚动位置
window.addEventListener('scroll', function() {
    localStorage.setItem('scrollPosition', window.scrollY);
});
// 恢复滚动位置
window.addEventListener('load', function() {
    var scrollPosition = localStorage.getItem('scrollPosition');
    if (scrollPosition) {
        window.scrollTo(0, parseInt(scrollPosition));
    }
});

二、会话存储

会话存储（SessionStorage）与本地存储类似，但它的数据仅在当前浏览器会话中有效。当会话结束（例如关闭标签页或浏览器）时，数据会被清除。以下是一些详细介绍：

1、使用会话存储保存数据

会话存储的使用方法与本地存储类似：

// 保存数据
sessionStorage.setItem('sessionID', '123456');
// 获取数据
var sessionID = sessionStorage.getItem('sessionID');
console.log(sessionID); // 输出: 123456

2、使用会话存储保存状态

会话存储也可以用于保存页面的状态，例如保存用户输入的表单数据：

// 保存表单数据
document.getElementById('myForm').addEventListener('input', function() {
    sessionStorage.setItem('formData', JSON.stringify({
        name: document.getElementById('name').value,
        email: document.getElementById('email').value
    }));
});
// 恢复表单数据
window.addEventListener('load', function() {
    var formData = JSON.parse(sessionStorage.getItem('formData'));
    if (formData) {
        document.getElementById('name').value = formData.name;
        document.getElementById('email').value = formData.email;
    }
});

三、Cookies

Cookies 是另一种在客户端存储数据的方法。虽然 Cookies 的容量较小，但它们具有跨会话、跨页面的持久性，且可以设置过期时间。以下是一些详细介绍：

1、使用 Cookies 保存数据

以下是一个保存和读取 Cookies 的示例：

// 保存 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/";
// 获取 Cookie
function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([.$?*|{}()[]\/+^])/g, '\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}
var username = getCookie('username');
console.log(username); // 输出: JohnDoe

2、使用 Cookies 保存状态

使用 Cookies 保存状态的一个示例是保存用户的主题选择：

// 保存主题选择
function setTheme(theme) {
    document.cookie = "theme=" + theme + "; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/";
    document.body.className = theme;
}
// 恢复主题选择
window.addEventListener('load', function() {
    var theme = getCookie('theme');
    if (theme) {
        document.body.className = theme;
    }
});
// 切换主题
document.getElementById('themeSwitcher').addEventListener('click', function() {
    var currentTheme = document.body.className === 'dark' ? 'light' : 'dark';
    setTheme(currentTheme);
});

四、URL 参数

URL 参数可以用于在页面刷新后保持状态。例如，在分页系统中，当前页码可以通过 URL 参数保存：

1、使用 URL 参数保存数据

以下是一个使用 URL 参数保存当前页码的示例：

// 保存当前页码
function savePageNumber(pageNumber) {
    var url = new URL(window.location);
    url.searchParams.set('page', pageNumber);
    window.history.pushState({}, '', url);
}
// 获取当前页码
function getPageNumber() {
    var url = new URL(window.location);
    return url.searchParams.get('page');
}
// 设置页码
var currentPage = getPageNumber() || 1; // 默认第一页
savePageNumber(currentPage);

2、使用 URL 参数保存状态

在实际应用中，可以使用 URL 参数保存更多状态信息，例如筛选条件、排序方式等：

// 保存筛选条件和排序方式
function saveFilterAndSort(filter, sort) {
    var url = new URL(window.location);
    url.searchParams.set('filter', filter);
    url.searchParams.set('sort', sort);
    window.history.pushState({}, '', url);
}
// 获取筛选条件和排序方式
function getFilterAndSort() {
    var url = new URL(window.location);
    return {
        filter: url.searchParams.get('filter'),
        sort: url.searchParams.get('sort')
    };
}
// 设置筛选条件和排序方式
var { filter, sort } = getFilterAndSort();
saveFilterAndSort(filter || 'all', sort || 'asc'); // 默认筛选条件和排序方式

五、页面刷新后恢复 JavaScript 逻辑

结合以上方法，可以实现页面刷新后恢复 JavaScript 逻辑。例如，在一个任务管理系统中，用户可以添加、删除任务，并在页面刷新后保留这些任务：

1、保存任务数据

function saveTasks(tasks) {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}
function getTasks() {
    return JSON.parse(localStorage.getItem('tasks')) || [];
}

2、恢复任务数据

function renderTasks(tasks) {
    var taskList = document.getElementById('taskList');
    taskList.innerHTML = '';
    tasks.forEach(function(task) {
        var taskItem = document.createElement('li');
        taskItem.textContent = task;
        taskList.appendChild(taskItem);
    });
}
window.addEventListener('load', function() {
    var tasks = getTasks();
    renderTasks(tasks);
});

3、添加和删除任务

document.getElementById('addTask').addEventListener('click', function() {
    var taskInput = document.getElementById('taskInput');
    var tasks = getTasks();
    tasks.push(taskInput.value);
    saveTasks(tasks);
    renderTasks(tasks);
    taskInput.value = '';
});
document.getElementById('taskList').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        var tasks = getTasks();
        tasks = tasks.filter(function(task) {
            return task !== event.target.textContent;
        });
        saveTasks(tasks);
        renderTasks(tasks);
    }
});

六、推荐的项目管理系统

在团队项目管理中，可以使用专业的项目管理系统来提升效率。推荐使用以下两个系统：

研发项目管理系统 PingCode：PingCode 专注于研发项目的管理，提供了完善的需求管理、任务分配、版本控制等功能，适合软件开发团队使用。
通用项目协作软件 Worktile：Worktile 是一款通用的项目协作软件，适用于各类团队和项目，提供了任务管理、时间管理、沟通协作等功能，帮助团队高效协作。

综上所述，通过本地存储、会话存储、Cookies、URL 参数等方法，可以在页面刷新后恢复 JavaScript 代码的执行状态。这些方法各有优劣，应根据具体需求选择合适的方法。同时，借助专业的项目管理系统，如研发项目管理系统 PingCode 和通用项目协作软件 Worktile，可以进一步提升团队的工作效率。