Question

我的页面上有两种样式：蓝色（默认）和红色。

<link  id="pagestyle" href="style_blue.css" rel="stylesheet" type="text/css" />

我使用以下代码在样式表之间切换：

<script type="text/javascript">
    function swapStyleSheet(sheet){
        document.getElementById('pagestyle').setAttribute('href', sheet);
    }
</script>

<div id="color_blue" onClick="swapStyleSheet('style_blue.css')"></div>
<div id="color_red" onClick="swapStyleSheet('style_red.css')"></div>

当我打开新页面时，设置显然会丢失。什么是将这些信息传送或存储到下一页的简单方法？

Answer 1

以下是从一个页面到下一个页面进行操作的四个选项：

在第一页上设置cookie值，然后在第二页加载时，读取该cookie值。
在第一页上设置本地存储值，然后在第二页加载时，读取该本地存储值。
在分派第二页之前，将查询参数添加到第二页的URL，然后在第二页加载时从该URL解析该查询参数。
将参数存储在您的服务器上（通过post或ajax调用），以便第二页可以使用它，或者由服务器合并到第二页，或者通过第二页从服务器查询（通过ajax））。

如果您没有理由在服务器上保留此值，并且您不需要它在短时间内自动过期而您在IE 8之前不需要支持，那么本地存储可能是最简单的。

将其存储在服务器上的优点是，无论用户使用哪种浏览器，该用户都可以使用该值（假设您有用户登录）。

使用cookie的优点是它适用于所有浏览器。

使用查询参数的好处是没有设置的长期存储（它本质上是一次性的事情）。

使用本地存储的优势在于它最简单，但仅适用于此特定浏览器。

以下是本地存储的简单程度：

// on page 1
localStorage.setItem("myValue", "foo");


// upon load of page 2
var myVar = localStorage.getItem("myValue");
if (myVar) {
    // code to do something based on the value of myVar
}

使用本地存储空间时，请记住您正在存储字符串，因此如果您的原生值不是字符串，则在阅读时必须将其转换为正确的类型，并确保您已将其转换为正确的类型存储正确的字符串值。

如何将onclick事件的结果转移到另一个页面？

1 个答案: