CODEWITHSUNDEEP
jquerycsshtmlbrowser-cache
Darren
Darren

Reputation: 105

Save the page state for return visit

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

Upvotes: 0

Views: 101

Answers (2)

Dario Oddenino
Dario Oddenino

Reputation: 1304

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?

Upvotes: 0

John Pink
John Pink

Reputation: 637

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.

Upvotes: 1

Related Questions