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中的信息。

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

Answer 2

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

类似的东西：

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

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

保存页面状态以便返回访问

2 个答案: