保留网页中的数据

使用查询参数在 HTML 页面之间传递数据会引发 URL 中数据可见性的问题。值得庆幸的是，JavaScript 和 jQuery 中有替代机制可以跨页面传输数据。

利用 HTML5 存储对象

为了解决这个问题，HTML5 提供了诸如 sessionStorage 和本地存储。这些对象提供了一种在浏览器本地存储中临时或永久存储数据的方法，以便以后方便检索。

会话存储

用于临时数据存储在单个浏览器会话，sessionStorage 是理想的选择。在会话结束之前（例如，当浏览器选项卡关闭时），存储在 sessionStorage 中的数据仍然可以访问。

sessionStorage.setItem('label', 'value');
sessionStorage.getItem('label');

本地存储

对于更永久的存储，localStorage是解决方案。即使关闭并重新打开浏览器，存储在 localStorage 中的数据仍然存在。

localStorage.setItem('label', 'value');
localStorage.getItem('label');

HTML5 存储对象的优点

• 数据保持隐藏，避免了 URL 中可见性的问题。
• 存储的值在多个页面中持续存在，甚至在浏览器刷新后也是如此（对于 localStorage）。
• 非常适合存储中间表单数据或需要在页面之间共享的其他基本信息。