50 行代码实现页面状态保持 keepalive，解放生产力

2023-11-26 23:59:57

挑战 21 天手写前端框架，这不仅是对技术能力的考验，更是对编码思想和逻辑思维的磨练。在第九天的学习中，我们一起来学习如何用 50 行代码实现页面状态保持 keepalive。

页面状态保持是什么？

页面状态保持，也称为 keepalive，是指在页面跳转或刷新时，能够保留之前输入或选择的数据，从而避免用户重复输入或选择的操作。这对于提高用户体验和减少用户操作失误非常重要。

如何用 50 行代码实现页面状态保持？

实现页面状态保持有许多方法，这里介绍一种简单易行的方案，只需要 50 行代码即可实现。

// 1. 创建一个全局变量来存储页面状态
let pageState = {};

// 2. 在页面加载时，将页面状态保存到全局变量中
window.onload = function() {
  pageState = JSON.parse(localStorage.getItem('pageState'));
};

// 3. 在页面卸载时，将页面状态保存到本地存储中
window.onunload = function() {
  localStorage.setItem('pageState', JSON.stringify(pageState));
};

// 4. 在需要使用页面状态时，从全局变量中获取
function getPageState() {
  return pageState;
}

// 5. 在需要更新页面状态时，将更新后的状态保存到全局变量中
function updatePageState(newState) {
  pageState = newState;
}

使用示例

// 保存页面状态
updatePageState({
  input1: document.getElementById('input1').value,
  input2: document.getElementById('input2').value
});

// 获取页面状态
const pageState = getPageState();

// 使用页面状态
document.getElementById('input1').value = pageState.input1;
document.getElementById('input2').value = pageState.input2;

注意事项

在使用页面状态保持功能之前，需要在页面中引入 localStorage API。
页面状态保存在本地存储中，因此只有在同一个浏览器和设备上才能保持页面状态。
页面状态保存在本地存储中，因此在清除本地存储时，页面状态也将被清除。

完整代码

// 1. 创建一个全局变量来存储页面状态
let pageState = {};

// 2. 在页面加载时，将页面状态保存到全局变量中
window.onload = function() {
  pageState = JSON.parse(localStorage.getItem('pageState'));
};

// 3. 在页面卸载时，将页面状态保存到本地存储中
window.onunload = function() {
  localStorage.setItem('pageState', JSON.stringify(pageState));
};

// 4. 在需要使用页面状态时，从全局变量中获取
function getPageState() {
  return pageState;
}

// 5. 在需要更新页面状态时，将更新后的状态保存到全局变量中
function updatePageState(newState) {
  pageState = newState;
}

// 使用示例
// 保存页面状态
updatePageState({
  input1: document.getElementById('input1').value,
  input2: document.getElementById('input2').value
});

// 获取页面状态
const pageState = getPageState();

// 使用页面状态
document.getElementById('input1').value = pageState.input1;
document.getElementById('input2').value = pageState.input2;