保存 return 次访问的页面状态

Question

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

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

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

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;
}

Answer 1

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

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

Answer 2

在 url 中使用查询字符串如何？

类似于：

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

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

保存 return 次访问的页面状态

Save the page state for return visit

html

css

jquery

browser-cache