Help With Local Storage - Hide Div When Hidden

Question

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">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="box">
        <span id="box-close">X</span>
        <p>
            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.
        </p>
    </div>
<script type="text/javascript" src="jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

.box {
    position: relative;
    background: steelblue;
    width: 300px;
    height: 300px;
    color: #fff;
    padding: 2rem;
}

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

$(document).ready(function(){

    var box = $("#box");

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

    if(localStorage.getItem("boxEdited")) {
        box.localStorage.getItem("boxEdited");
    }

});

Thanks!

Answer 1 · 2016-02-19T01:47:21Z

February 19, 2016 1:47am

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.

Welcome to the Treehouse Community

Looking to learn something new?

Joe Consterdine

Joe Consterdine

Help With Local Storage - Hide Div When Hidden

1 Answer

Shawn Denham

Shawn Denham