How to create local storage?

Question

My website has tabs and within that tab, info cards and a checkbox on the right hand side that highlights the card in a different colour. How can I makes it so that onclick the highlighting is saved even if the page is refreshed or if the page is sent as a link? Full code here: http://codepen.io/johnsonshara/pen/obGjGN (below code not in code pen version)

What I have tried:

function save () {
    var fieldValue = document.getElementById('like').value;
    localStorage.setItem('checkbox', 'fieldValue');
}

function load () {
    var storedValue = localStorage.getItem('checkbox');
    if(storedValue){
        document.getElementById('like').value = storedValue;
    }   
}

And This:

function save() {
if(typeof(Storage) !== "undefined") {
if (localStorage.setItem) {
localStorage.setItem = document.getElementById("like");
} else {
localStorage.getItem = .hasClass.apply;
}
document.getElementById("like").innerHTML = localStorage.toString;
} else {
document.getElementById("like").innerHTML = "Sorry, an error occured.";
}
}

html

<input type="checkbox" class="faChkRnd" onclick="save()" id="like" >

Talk about really changing your question... Now the only answer looks wrong. If it is a checkbox, why are you not cheking click. Second you are setting localStorage to a string and not the variable. — epascarello, Jan 15 '16 at 14:14
Ok, that's why i asked the question . . . because i don't know and i'm learning. — About Leros, Jan 15 '16 at 14:21
Thanks Chris! Would it make a difference if it was in a bootstrap tab? — About Leros, Jan 15 '16 at 14:29

YaBCK · Answer 1 · 2016-01-15T14:22:12.317

Check out the following link to see how you can use the local storage:

http://www.w3schools.com/html/html5_webstorage.asp

Quick example code of how it would work:

// Put the object into storage
localStorage.setItem('testObject', "testing");

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

Example using your example code above:

alert(load());

$(document).on("click", "#clickME", function(){
  save();
});

function save () 
{
    var fieldValue = "testString";
    localStorage.setItem('checkbox', fieldValue);
}

function load () 
{
    var storedValue = localStorage.getItem('checkbox');
    if(storedValue)
    {
        console.log("VALUE :" + localStorage.getItem('checkbox'));
    }   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="clickME">Click me</button>

I use the above extensively in all my hybrid apps – Dan Tromp Jan 15 '16 at 14:17 — Dan Tromp, Jan 15 '16 at 14:17

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

0

or if the page is sent as a link

You should store your data as a url parameter not in the local storage. So anyone that click on the link will get the data.

See this link to know more about using url parameters with JS: How to get the value from the GET parameters?

edited May 23 '17 at 11:59

Community

1
1

answered Jan 15 '16 at 14:32

Arashsoft

2,749
5
35
58

That's what I thought, but was having difficulty creating urls for tabs and also saving the highlighting. – About Leros Jan 15 '16 at 14:56
@AboutLeros, You can save anything in url as long as the total length of your url is less than 2kb (2,083 characters). http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers – Arashsoft Jan 15 '16 at 15:10
To be honest I wouldn't even know where to begin with that. – About Leros Jan 15 '16 at 15:17
Ok, linked up the tabs to different urls, but now really have no idea how to store the data in the url. would you mind helping me? @Arashsoft – About Leros Jan 15 '16 at 17:29
Lets say you have 4 tabs, and your webpage domain is www.mysite.com/mypage. Now you need to add a url parameter to your link such as : www.mysite.com/mypage?tab=tab1. In your javascript file when the page loads, you read the `tab` parameter. and you goto appropriate tab – Arashsoft Jan 15 '16 at 17:54
I just read your question for one more time. You want a user click on like and every time that specific user opens the page, the like be highlighted. Am I right? – Arashsoft Jan 15 '16 at 18:02
Using the url is not the solution in this case. – Arashsoft Jan 15 '16 at 18:03
I created a new question as we were going off topic here. I have made the question much better there. http://stackoverflow.com/questions/34817091/how-to-store-data-as-a-url-parameter-using-javascript – About Leros Jan 15 '16 at 18:06
I think in this case, you should store your `like` data as localStorage however it is limited to the user browser (it is not similar to facebook `like` because facebook store it in the serverside). – Arashsoft Jan 15 '16 at 18:08

How to create local storage?

2 Answers2

Linked