Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Joe Consterdine
Joe Consterdine
13,965 Points

Help With Local Storage - Hide Div When Hidden

Hey guys,

trying to use local storage.

I'm wanting to test hiding a div when the user clicks on the cross and then saving that state so when they refresh it remains hidden.

I've checked out Guil's video but couldn't figure it out in this example.

Here is my html, css and js:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
    <div id="box">
        <span id="box-close">X</span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<script type="text/javascript" src="jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="main.js"></script>
.box {
    position: relative;
    background: steelblue;
    width: 300px;
    height: 300px;
    color: #fff;
    padding: 2rem;

.box span {
    position: absolute;
    top: 2px;
    right: 2px;
    cursor: pointer;

    var box = $("#box");

    $("#box-close").on("click", function(){
        var boxNew = box.addClass("hidden");
        localStorage.boxEdited = boxNew;

    if(localStorage.getItem("boxEdited")) {



1 Answer

I think you want to look into cookies. Every time the user leaves and comes back to page all of your code is basically reset. The only way I know to save user state is though the use of cookies.