CODEWITHSUNDEEP
javascripthtml
STOAM
STOAM

Reputation: 95

How to use localStorage to cache button result?

I have a button that I am making completely out of JS.

I want to save whether it was in a true or false state so that if a user leaves the page the button will be in the same state when they return. I'd like to use localStorage but I'm relatively new to JS so they may be a better solution.

Current Code:

var btn;
var btn = document.createElement("BUTTON");
btn.onclick =  function() {myFunction()};
btn.style.height = "100%";
btn.style.width = "98%";
btn.style.border = "0px";
btn.innerHTML = "CLICK ME";  
btn.id = "toggle";


document.getElementById("button").appendChild(btn);

function myFunction() {
    document.getElementById('notepad').classList.toggle('hide'); return false
}

Edit Code:

window.onload = function initBt(){
var buttonState = localStorage.getItem('mybutton');
if ( null !== buttonState )
{
buttonState && document.getElementById('notepad').classList.add('hide');
}
}
var btn;


var btn = document.createElement("BUTTON");
btn.onclick =  function() {myFunction()};
btn.style.height = "100%";
btn.style.width = "98%";
btn.style.border = "0px";
btn.innerHTML = "CLICK ME";  


btn.id = "toggle";


document.getElementById("button").appendChild(btn);


function myFunction() {
var bt = document.getElementById('notepad');
bt.classList.toggle('hide');
localStorage.setItem('mybutton', bt.classList.contains('hide'))
return false;
}

Upvotes: 1

Views: 108

Answers (1)

Nikos M.
Nikos M.

Reputation: 8345

you can use following functions in youir code to store and retrieve the button state:

localStorage documentation

function store(key, data)
{
    localStorage.setItem(key, JSON.stringify(data));
}

function retrieve(key)
{
   var data = localStorage.getItem(key);
   return data ? JSON.parse(data) : null;
}

function remove(key)
{
   localStorage.removeItem(key);
}

usage examples:

store('mybutton', buttonState);
var buttonState = retrieve('mybutton');
if ( buttonState !== null )
{
   /* set button State*/
}
else
{
   /* state has not been saved before, initialise */
}

NOTE since localStorage can handle ONLY string values, we use JSON.stringify when saving to make a string out of data and JSON.parse when retrieving in order to store and retrieve arbitrary data (that are of course JSON valid structures)

For your updated question try the following (it would be more helpfull if the whole html structure was added since some elements are missing, but anyway):

// include the needed localStorage manipulation methods
function store(key, data)
{
    localStorage.setItem(key, JSON.stringify(data));
}
function retrieve(key)
{
   var data = localStorage.getItem(key);
   return data ? JSON.parse(data) : null;
}
function remove(key)
{
   localStorage.removeItem(key);
}

// create and initialise the button
var btn = document.createElement("BUTTON");
btn.onclick =  function() {myFunction()};
btn.style.height = "100%";
btn.style.width = "98%";
btn.style.border = "0px";
btn.innerHTML = "CLICK ME";  
btn.id = "toggle";
document.getElementById("button").appendChild(btn);
var buttonState = retrieve('mybutton');

// make sure at this point element with id="notepad" exists on page
if ( null !== buttonState )
{
    buttonState && document.getElementById('notepad').classList.add('hide');
}

function myFunction() {
var bt = document.getElementById('notepad');
bt.classList.toggle('hide');
store('mybutton', bt.classList.contains('hide'));
return false;
}

For a flexible caching library for web/browser that can support a variety of storage mechanisms (and also support for server-side php and node.js) check Unicache (ps. I am the author)

There are of course other libraries as well (eg localForage)

Upvotes: 3

Related Questions