localStorage Assistance

[aRMY83]

I'm working on a plugin that has the following Javascript to .hide / .show when one clicks either of those buttons in the HTML below.

Javascript:

<script type="text/javascript">
$(document).ready(function(){
$('#mdivx1').hide();
$('#stop').click(function(){
$('#mymarquee').hide();
$('#mdivx1').show().html($('#mdivx').html());
});
$('#start').click(function(){
$('#mymarquee').show();
$('#mdivx1').hide().html();
});
});
</script>


HTML:

<span style="float: left"><input type="button" value="Stop (Hide) Marquee" id="stop">
<input type="button" value="Start (Show) Marquee" id="start"></span>

I know nothing about setting up keys, if even needed, for localStorage for when a user clicks on a hide or show button, that it will remember those settings until they clear their cache.

Did take a look at the Yootil API Documentation 1.0.0 storage:

yootil.pixeldepth.net/#!/api/yootil.storage

and my understanding of it is at a loss.

Appreciate any and all advice / directions to how I can set this up.

[Peter]

For something so small, I wouldn't recommend Yootil, even though it is installed on a lot of forums, it would be silly to get people to install it for such a small script, though it's your choice.

If you do wish to use Yootil, then it's really simple, and the docs has examples:

Setting:
yootil.storage.set("mykey", "myvalue", false, true)

- The 3rd parameter is if you want to store the value as a JSON string, for you, you can pass false, as you simple want to store a flag (i.e on or off).
- The 4th parameter is to use localStorage (if true is passed) instead of sessionStorage, so it's persistent.

Retrieving:
yootil.storage.get("mykey", false, true)

- The 2nd parameter is if the value stored is JSON or not.
- The 3rd parameter (if true) will look in persistent storage only.

Now, if you prefer not to use Yootil, then I will point you to the docs which contains all the info you will need.

developer.mozilla.org/en/docs/Web/API/Window/localStorage
developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

[aRMY83]

Thanks Peter for the rapid response and those links you provided above.

I am one of those forums that has Yootil v1.1.1 (plugin) installed and if I go with Yootil, I must say that I'm still at a loss as to how/where to implement the Settings/Retrieving with the Javascript that I have presented and also, do I have to create a key for this?

Sorry to be a noob at this Yootil / Storage understanding.

[Peter]

aRMY83,

No key needed, using the browsers storage will be fine.

There are basically 3 things you need to do. You will be setting a simple flag in storage, either 1 or 0.

1. When they click to show, then you set the value to 1.
2. When they click to hide, then you set the value to 0.
3. When they load the page, your script should see what the value is, if it's 1 then it is shown, if it's 0, then it's hidden.

So what you need to do is in each click handler, add in the line of code to store the value. Then outside those click handlers, you need to check the value of your storage item, so then you can either hide or show the item.

If you are still unsure, let me know. I try to avoid posting code as an answer until that person is really stuck, that way they have a chance to learn and figure it out.

[aRMY83]

Hello Peter

That information is a great help in understanding what I have to do and totally agree on "that way they have a chance to learn and figure it out" and with what you have provided thus far is a good starting point.

If I run into trouble or completely stuck, I'll post back here for more assistance.

[Quozzo]

If you're just hiding and showing the elements, you don't need to touch the html methods. The HTML is still there, trust me

[aRMY83]

Hello Peter

Since I could never figure out the yootil.storage.set("mykey", "myvalue", false, true) with yootil.storage.get("mykey", false, true) I then decided to give localStorage.setItem('myCat', 'Tom'); with localStorage.getItem('myCat'); a try and for the past few days reading the "how to" doc examples, I came up with absolutely nothing.

As for the docs, most if not all pointed out that it was "simple, piece of cake, easy" and the list goes on. There is no doubt that either I'm reading into it to much or just can't grasp as to how to get it to work.

This is what I came up with testing it and have five more, but no sense in showing those as they did not work either.

Example: wrapped these around this element:

$(document).ready(function(){
$('#mdivx1').hide();
$('#stop').click(function(){
localStorage.setItem('hide', 'show');
$('#mymarquee').hide();
localStorage.getItem('hide');
$('#mdivx1').show().html($('#mdivx').html());
});
$('#start').click(function(){
$('#mymarquee').show();
$('#mdivx1').hide().html();
});
});

There was no reason, at least I did not think so, to do the above with this element:

$('#mymarquee').show();

as all it did when clicking on that button, was to show/start the marquee.

Just to note, I also read this tutorial:

toddmotto.com/storing-data-in-the-browser-with-the-html5-local-storage-api/

[Quozzo]

Think of local storage as a variable, just like any other, except it persists after the session/page load. To show/hide the spoiler you must first check the variable. If true hide it, if not show it (or vice versa)

LocalStorage annoyingly has methods, but no-one uses them. Its easier to literally assign values to them like an object and retrieve values like an object.


var hide = localStorage["hide"];

localStorage["hide"] = "hide";


You then need to use if statements in your code to check if you should run the line to hide or open the spoiler.

As i've mentioned though. You are not using the html methods correctly. See the jQuery html method for more info. Hint: its only needed to retrieve or change the html.

[aRMY83]

Hello Quozzo

Appreciate your input and those html's have been removed.

As for the if statements, I think I'm getting close, but sadly it's still not working:

var hide = localStorage["hide"];
if ("show") {  
}
else {
localStorage["hide"] = "hide";
}
$(document).ready(function(){
$('#mdivx1').hide();
$('#stop').click(function(){
$('#mymarquee').hide();
$('#mdivx1').show();
});
$('#start').click(function(){
$('#mymarquee').show();
$('#mdivx1').hide();
});
});

Anyways... I'm still at a loss, but once again, do appreciate your input and your valued coding knowledge.

EDIT: no further assistance needed as i have decided not to use localStorage for this plugin.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Apr 11, 2016 12:07:30 GMT -8 aRMY83 said:

Hello Quozzo

Appreciate your input and those html's have been removed.

As for the if statements, I think I'm getting close, but sadly it's still not working:




Anyways... I'm still at a loss, but once again, do appreciate your input and your valued coding knowledge.

EDIT: no further assistance needed as i have decided not to use localStorage for this plugin.

Just want to mention
 if ("show") {

}

"show" is not a variable because it has quotes. That makes it a string. Any string is considered truthy. Truthy means that it's evaluated as 1, true, 1==1 or any other true statement. So your 
localStorage["hide"] = "hide";

was never run because it was in an ELSE statement

[aRMY83]

Hello P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓

Now you have me wanting to give it a go again...

and thanks for the input and appreciated. Just did a mod on that code to read:

var hide = localStorage["hide"];
if ("show") {
localStorage["hide"] = "hide";
}
$(document).ready(function(){
$('#mdivx1').hide();
$('#stop').click(function(){
$('#mymarquee').hide();
$('#mdivx1').show();
});
$('#start').click(function(){
$('#mymarquee').show();
$('#mdivx1').hide();
});
});

and it still does not work.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Apr 12, 2016 6:33:48 GMT -8 aRMY83 said:

Hello P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓

Now you have me wanting to give it a go again...

and thanks for the input and appreciated. Just did a mod on that code to read:

var hide = localStorage["hide"];
if ("show") {
localStorage["hide"] = "hide";
}
$(document).ready(function(){
$('#mdivx1').hide();
$('#stop').click(function(){
$('#mymarquee').hide();
$('#mdivx1').show();
});
$('#start').click(function(){
$('#mymarquee').show();
$('#mdivx1').hide();
});
});

and it still does not work.

I'm going to help you out. "show" is a string. Which means it will always evaluate true. Which means DON'T USE IT. 
You want to check the value of your hide variable (which is a bad global variable name to have because it's a common word)
So more like:

var armyHide = localStorage["hide"];
//default if doesn't exist

if(armyHide==undefined)
armyHide = "hide"
$(document).ready(function(){

//if set to hide, run your start function (which hides your div)
if(armyHide=="hide")
$('#start').click()

$('#stop').click(function(){

$('#mymarquee').hide();

$('#mdivx1').show();
//if click stop set div to show

localStorage["hide"] = "show"
});

$('#start').click(function(){

$('#mymarquee').show();

$('#mdivx1').hide();

//if click start set div to hide again
localStorage["hide"] = "hide"

});

});
Should keep your last view settings. (if you are trying to keep track of mymarquee and not mdiv I guess make it do the opposite lol)

[aRMY83]

Hello P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓

It's still not working when one clicks on the (Hide)" button and then does a refresh.

When clicking on the (hide) button it hides the marquee, but the problem is that when one does a refresh, the marquee now shows without clicking on the (Show) button.

What I'm trying to achieve, is when one clicks on the (Hide) button, the the marquee stays hidden until they clear their cache.

You can give it a try here: (my test site)

twkooler.proboards.com/

Now click on the (Hide) button and then do a refresh and watch the marquee appear again. This is what I don't want to happen until they click on the (Show) button.

Note: totally agree on the hide variable and I should have caught that one.

[Quozzo]

All of the code should really be contained within the anonymous function within the ready method. Then the variable names will be within their own scope and can't be overwritten. That's a much better practise than renaming variables to something obscure because they may become unreadible and it is still possible to overwrite them. Not so within their own scope.

[aRMY83]

Apr 12, 2016 10:31:18 GMT -8 Quozzo said:

All of the code should really be contained within the anonymous function within the ready method. Then the variable names will be within their own scope and can't be overwritten. That's a much better practise than renaming variables to something obscure because they may become unreadible and it is still possible to overwrite them. Not so within their own scope.

Thanks Quozzo for your input and this fellow is really confused now on the ways to incorporate the localStorage settings to get this to work.

Having said, would it be to much to ask if you could take the code below and modify it the way you have suggested earlier in this thread so I can do a test on it at my test site?

Code to modify:

$(document).ready(function(){
$('#mdivx1').hide();
$('#stop').click(function(){
$('#mymarquee').hide();
$('#mdivx1').show();
});
$('#start').click(function(){
$('#mymarquee').show();
$('#mdivx1').hide();
});
});

As mentioned above, all I want is when one clicks on the (Hide) button that the marquee stays hidden until one refreshes.