保存页面状态以供回访答案

【问题标题】：Save the page state for return visit保存页面状态以供回访
【发布时间】：2015-10-27 18:15:25
【问题描述】：

我正在构建一个伴随演示文稿的网站。有人问我是否可以根据呈现的内容定制网站内容，即删除页面上的一些元素。所以我构建了一个非常简单的脚本，它将隐藏内容并在刷新时重置。

我被问到是否有一种方法可以提前准备好演示文稿。这里的问题是它可以提前一小时或一天设置，然后可以关闭浏览器。

我不是在寻找带有保存的配置文件等的高级登录，但是有没有一种方法可以让网站记住上次在屏幕上显示的内容并通过缓存或理想情况下使用用户名以相同的方式重新加载它就像一个电子邮件地址。

HTML

<div id="uber">
    <div class="box box1">
        <a href="#" class="remove">Remove</a>
        <h1>Box 1</h1>
        <p>Objectively simplify dynamic e-business before out-of-the-box channels. </p>
    </div>
    <div class="box box2">
        <a href="#" class="remove">Remove</a>
        <h1>Box 2</h1>
        <p>Compellingly build global human capital rather than magnetic partnerships. </p>
    </div>
    <div class="box box3">
        <a href="#" class="remove">Remove</a>
        <h1>Box 3</h1>
        <p>Holisticly communicate premium technologies rather than 24/7 content. </p>
    </div>
    <div class="pageRefresh">
        <button>Refresh a Page in jQuery</button>
    </div>
</div>

jQuery

$('.remove').click(function() {
    $(this).closest('.box').fadeOut("slow", function() {
        $(this).addClass('is-hidden');
    });
});

$('.pageRefresh').click(function() {
    $('.box.is-hidden').fadeIn("slow", function() {
        $(this).removeClass('is-hidden');
    });
});

CSS

.box {
    float: left;
    margin-right: 20px;
    padding: 10px;
    width: 20%;
    background: lightgrey;
}

.pageRefresh {
    clear: both;
    padding: 20px 0;
}

.is-hidden {
    display: none;
}

【问题讨论】：

标签： jquery css html browser-cache

【解决方案1】：

您可以定义一个严格格式化的 JSON 对象（或其他），其中包含有关显示内容、显示方式/位置的信息，并将此对象保存在人员的 localStorage 中。

在页面加载时，您从 localStorage 读取此对象，并根据其值，相应地显示您的页面。

【讨论】：

看起来 localStorage 可能是最好的选择。我将对此进行调查和研究。谢谢。

【解决方案2】：

在你的网址中使用查询字符串怎么样？

类似：

?hide[]=box1&hide[]=box2

然后使用以下解决方案之一在准备好的文档上解析它： How can I get query string values in JavaScript?

【讨论】：