CodingForums.com - global variables using jstorage

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - global variables using jstorage (http://www.codingforums.com/showthread.php?t=286280)

global variables using jstorage

I am trying out a javascript storage system called jstorage. It is like cookies but without the restrictions. I can insert a value and resurrect it later with:

Code:

insert_value();

get_value();

I am now using it in a script to store the fields of inputs and instantly update them in the page. It works!

Code:

window.onload = function()

{

        var theInputs = document.getElementsByTagName('input');

        for(var i = 0; i < theInputs.length; i++)

        {

                if(theInputs[i].type == 'text')

                {

                        theInputs[i].onkeyup = function()

                        {

                                validate();insert_value(this.name,this.value);

                        }

                }

                get_value('done');

                if(value != null)

                {

                        theInputs[i].value = value;

                }

        }

}



function insert_value(key, val){

$.jStorage.set(key, val);

var key = "",val = "";

}



function get_value(key){

var value = $.jStorage.get(key);

var key = "";

}

But what I want to do is a bit more complicated. It has to do with global variables, I think.

I want to get the value of a previously stored item and use it with the value of the item displayed in the code above e.g:

Code:

get_value('something') + get_value('done')...



i.e. fred + y

...and then save this combined value using the jstorage insert_value() function to be retrieved later.

The question is not a jstorage issue (as far as I can see), but a way to use the retrieved get_values in the windows onload function.

Everything I try doesn't let me use the values retrieved which become undefined or null when I try to combine them.

Can anyone see what I am doing wrong? Here is the entire page:

Code:

<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Test</title>

<script src="js/json2.js"></script>

<script src="js/jstorage.min.js"></script>

<script>

window.onload = function()

{

        var theInputs = document.getElementsByTagName('input');

        for(var i = 0; i < theInputs.length; i++)

        {

                if(theInputs[i].type == 'text')

                {

                        theInputs[i].onkeyup = function()

                        {

                                validate();insert_value(this.name,this.value);

                        }

                }

                get_value('done');

                if(value != null)

                {

                        theInputs[i].value = value;

                }

        }

}



function insert_value(key, val){

$.jStorage.set(key, val);

//alert(key);alert(val);

var key = "",val = "";

}



function get_value(key){

var value = $.jStorage.get(key);

alert(value);

var key = "";

}



get_value('lesson');

get_value('done');



</script>

</head>



<body>



<table border="0" cellpadding="0" cellspacing="0">

        <tr>

                <td>

                <table class="write" border="0" style="border-collapse: collapse" cellpadding="3">

                        <tr>

                                <td>

                                <input type="text" id="done" name="done" size="2" maxlength="1" value="N"></td>

                        </tr>

                </table>

                </td>

        </tr>

</table>



</body>



</html>

you have whole javascript ???

You mean the packages? You can get them from here:

https://github.com/douglascrockford/...aster/json2.js

and here:

https://github.com/andris9/jStorage

I haven't included my failed tries.

since localStorage works in IE8, that is a WHOLE lot of code just to support IE7. imho, K.I.S.S.

i also see a lot of deprecated APIs in jStorage's source code, and everything comes back as a string instead of a rich type. yuck.

if you are addung two numbers, you'll have to call "Number(a)+Number(b)" instead of just "a+b", that might be your issue here, but it wouldn't explain why one was undefined.

the "this.name,this.value" is likely wrong: this refers to window in an onload event.

you probably want something like:

Code:

insert_value( theInputs[i].name, theInputs[i].value);

edit:

here is a an IE6 compatible storage routine that uses strong types and MUCH less code than jStorage:

Code:

var store = (function() {

        if (!location.protocol.match("data") && !window.localStorage) {

                window.localStorage = {};

        } //end webkit+ie8  patch



        if (window.localStorage && !location.protocol.match("data")) {

                function store(key, val) {

                        if (val) {

                                localStorage[document.domain][key] = val;

                        } else {

                                try {

                                        var tm = localStorage[document.domain][key];

                                        if (tm) {

                                                tm = tm.toString();

                                        }

                                } catch (rr) {

                                        return "";

                                }

                                return tm;

                        }

                        return;

                }

        } else {

                var store = function(key, val) {

                        if (val) {

                                setCookie(key, val);

                        } else {

                                return getCookie(key);

                        }

                }

        }



        function iestorer() {

                var D = document;

                if (!D.createStyleSheet || window.localStorage) {

                        return;

                }

                var tCSS = D.createStyleSheet();

                tCSS.addRule(".userData", "behavior:url(#default#userdata)", 0);

                var Static = D.createElement("input");

                var Q = function(z, x) {

                        Static.setAttribute(z, x);

                };

                Q("type", "hidden");

                Q("id", "EzStatic4");

                Q("className", "userData");

                document.getElementsByTagName("head")[0].appendChild(Static);

                var s = document.getElementById("EzStatic420");



                function ies(k, v) {

                        if (!v) {

                                s.load("oXMLStore");

                                var t = s.getAttribute(k);

                                return unescape(t) || "";

                        } else {

                                s.setAttribute(k, escape(String(v)));

                                s.save("oXMLStore");

                        }

                }

                window.store = ies;

        }

        iestorer();

        return store;

}()));

use it like store(key) to get and store(key,value) to set; simple.

if you want to support old non-ie browers (why), you'll need to provide your own ubiquitous setCookie and getCookie functions...

Thanks rnd me. I am starting to think that my approach is wrong. I have to know first what storage system to use. But it all looks a bit insecure.

I'll ask about storage systems elsewhere.

I think this js issue is (partly) solved by using the variables outside of the function(s).

See my comments in your thread in the MySQL forum.

There is no reason any more for having global variables at all in JavaScript - except for one per shared library/framework.

Read the whole thread and the one in the MySQL forum, Felgall. He isn't really talking about JS global variables, at all. He just wants persistent storage of user input.

Just to finish off, using rnd me's example, this will work:

Code:

window.onload = function(){



// *****from rnd me ************************************

var store = (function() {

        if (!location.protocol.match("data") && !window.localStorage) {

                window.localStorage = {};

        } //end webkit+ie8  patch



        if (window.localStorage && !location.protocol.match("data")) {

                function store(key, val) {

                        if (val) {

                                localStorage[document.domain][key] = val;

                        } else {

                                try {

                                        var tm = localStorage[document.domain][key];

                                        if (tm) {

                                                tm = tm.toString();

                                        }

                                } catch (rr) {

                                        return "";

                                }

                                return tm;

                        }

                        return;

                }

        } else {

                var store = function(key, val) {

                        if (val) {

                                setCookie(key, val);

                        } else {

                                return getCookie(key);

                        }

                }

        }

        

// *****************************************



var x = store('lesson'); // get 'lesson' key

//alert(x);

var theInputs = document.getElementsByTagName('input');



        if(theInputs == null)

        {

         store('done', 'n');theInputs[i].value = 'n'; //alert("mmm");

    }

        for(var i = 0; i < theInputs.length; i++)

        {

                if(theInputs[i].type == 'text')

                {

                        theInputs[i].onkeyup = function()

                        {

                                validate();store('done',value);

                                store(x,value);

                                var y = store(x);

                                alert('The value of the key \'lesson1\' is '+y);

                        }

                }

                theInputs[i].value = value;

        }

}



function validate() {

var val = document.getElementById('done').value;

if (/[^yYnN]/.test(val)) {

alert ('Please enter Y or N');

document.getElementById('done').value = "";

return;

}

}

Quote:

Originally Posted by Old Pedant (Post 1308665)

Read the whole thread and the one in the MySQL forum, Felgall. He isn't really talking about JS global variables, at all. He just wants persistent storage of user input.

So the thread title is wrong and needs to be fixed since it is asking about global variables. The current title makes it look like the OP doesn't even know what global variables are.