Save the page state for return visit

Question

I am building a site that accompanies a presentation. I have been asked if the site content can be tailored according to what is presented, i.e. remove some elements on the page. So I have built a very simple script that will hide content and reset on refresh.

What I have been asked is if there is a way the presentation can be set up ready in advance. The issue here is it could be set up an hour or a day in advance and then the browser could be closed.

I'm not looking for an advance login with saved profiles etc, however is there a way where the site will remember what content was last displayed on screen and reload it the same way either by caching or ideally by use of a username like a email address.

Here is what I have on Fiddle.

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

score 1 · Accepted Answer · answered Oct 27 '15 at 18:18

1

You could define a strictly formatted JSON object (or other) containing information on what to display, how / where to display it, and save this object in the person's localStorage.

On page load, you read this object from localStorage, and depending on its values, your page presents itself accordingly.

answered Oct 27 '15 at 18:18

John Pink

607
5
14

It looks like localStorage might be the best way to go. I will look into and research this. Thanks. – Darren Oct 28 '15 at 14:05

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

How about using a query string in your url?

Something like:

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

And then parsing it on document ready with one of this solutions: How can I get query string values in JavaScript?

edited May 23 '17 at 12:23

Community

1
1

answered Oct 27 '15 at 18:23

Dario Oddenino

1,294
2
9
15

Save the page state for return visit

2 Answers2