很抱歉，我无法按照您的要求在Markdown格式下生成文章，但是我可以给您提供一份符合您需求的文章：
如何使JS变量在页面刷新后保留值？
在前端开发中，我们经常需要在网页中存储数据。然而，在页面刷新后，所有JavaScript变量将会被重置为它们最初的值，这可能会导致用户体验上的问题。本文将介绍几种方法来解决这个问题。
- 使用浏览器的本地存储
现代浏览器支持两种本地存储API：localStorage和sessionStorage。它们允许我们存储字符串数据，并且在同一域名下的所有页面之间共享。localStorage里面的数据不会过期，而sessionStorage只会在会话结束时失效。以下是一个例子：
// 存储数据到 localStorage
localStorage.setItem('key', 'value');
// 获取存储的数据并显示出来
const storedValue = localStorage.getItem('key');
console.log(storedValue); // 输出 "value"- 使用cookie
另一种存储数据的方式是使用cookie。它是一种键值对的形式存储数据的小文件，存放在用户计算机的硬盘上。与localStorage和sessionStorage不同，cookie有一个过期时间。以下是一个例子：
-- -------------------- ---- ------- -- -------- --------------- - ----------------------- -- --- ---- -------- ----- -- ------------- ----- ----------- - --------------- --------- -- --------- -- ----------------------- --------------- ------------------------- -- -- -------
- 使用URL参数
使用URL参数存储数据是一种简单但有效的方法。通过在URL中添加查询字符串，我们可以将数据传递给下一个页面或者在同一页面之间共享数据。以下是一个例子：
// 在URL中添加查询字符串
window.location.search = 'key=value';
// 获取查询字符串并显示出来
const params = new URLSearchParams(window.location.search);
const paramValue = params.get('key');
console.log(paramValue); // 输出 "value"- 使用Web Storage和IndexedDB
Web Storage和IndexedDB是HTML5提供的两个API，它们提供了更多功能以及更高级的存储机制。除了本地存储之外，它们还允许我们在浏览器中存储大量数据。然而，学习和使用它们需要更高级的技能。
-- -------------------- ---- -------
-- ----- -----------
------------------------------------ ---------
----- ----------- - -------------------------------------
------------------------- -- -- -------
-- ---------------
----- ------- - ------------------------------------- ---
----------------------- - ---------- -
----- -- - ---------------
----- ----------- - --------------------------------- - -------- ---- ---
----------------- --- -- ---- ------- ---
--
----------------- - ---------- -
----- -- - ---------------
----- ----------- - ------------------------------
----- ----------- - -------------------------------------
----- ------- - -------------------
----------------- - --------------- -
-------------------------------- -- -- -------
--
--需要注意的是，浏览器的隐私模式可能会禁用某些存储API。在实际开发中，我们需要考虑到这一点并且做好错误处理。
综上所述，以上是一些常用的方法来使JS变量在页面刷新后保留值。选择哪种方法取决于你的具体需求以及你的技术栈。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12034