Local Storage Not working? Have no idea why

Question

Sorry i couldn't elaborate on my problem more but i can't really see any problems. the two functions save() and load() run onclick

<button onclick="save()">save</button>
<button onclick="load()">load</button>

The code in meant to grab the value of all the inputs and save it to local storage. then on load add the saved data back into the form Fields

i'm new to php and JavaScript so it may look a bit messy but that's because i "generate" this via a php array and for loop (the array changes depending on with option is chosen)

//save

function save() {
if (typeof(Storage) != "undefined") {
        var seometatitle = document.getElementById("seo_meta_title").value;
            saveData(seometatitle);

        function saveData(xseometatitle) {
                localStorage.setItem("seometatitle", xseometatitle);
        }
    }

        var seometadescription = document.getElementById("seo_meta_description").value;
            saveData(seometadescription);

        function saveData(xseometadescription) {
            localStorage.setItem("seometadescription", xseometadescription);
        }   
    }

        var header = document.getElementById("header").value;
            saveData(header);

        function saveData(xheader) {
            localStorage.setItem("header", xheader);
        }
    }

        var pagetext = document.getElementById("page_text").value;
            saveData(pagetext);

        function saveData(xpagetext) {
            localStorage.setItem("pagetext", xpagetext);
        }
    }

        var linkurl = document.getElementById("link_url").value;
            saveData(linkurl);

        function saveData(xlinkurl) {
            localStorage.setItem("linkurl", xlinkurl);
        }   
    }

        var buttontext = document.getElementById("button_text").value;
            saveData(buttontext);

        function saveData(xbuttontext) {
            localStorage.setItem("buttontext", xbuttontext);
        }   
    }
}} //end

// LOAD

function load() {
if (typeof(Storage) != "undefined") {
document.getElementById("seo_meta_title").value = localStorage.getItem("seometatitle");
document.getElementById("seo_meta_description").value =  localStorage.getItem("seometadescription");
document.getElementById("header").value = localStorage.getItem("header");
document.getElementById("page_text").value = localStorage.getItem("pagetext");
document.getElementById("link_url").value = localStorage.getItem("linkurl");
document.getElementById("button_text").value = localStorage.getItem("buttontext");
}}

Just for the sake of it here is the php to generate the save function

$arrlength = count($matches[0]); # Get how many items in array two.
for($x = 0; $x < $arrlength; $x++) { #counting
    $place_name = str_replace ( "_" , "" , $matches[0][$x] ); #Create readible name _ to space.
    echo 'var ' .$place_name. ' = document.getElementById('.'"'.$matches[0][$x].'"'.').value;';

        echo "\n";
        echo   'saveData('.$place_name.');';
        echo "\n";
        echo 'function saveData(x'.$place_name.') {';
        echo "\n";
        echo 'localStorage.setItem("'.$place_name.'", x'.$place_name.');';
        echo "\n";
        echo '}}';
        echo "\n";

And here is the php for the load function

$arrlength = count($matches[0]); # Get how many items in array two.
for($x = 0; $x < $arrlength; $x++) { #counting
    $place_name = str_replace ( "_" , "" , $matches[0][$x] ); #Create readible name _ to space.
     // Retrieve
    echo 'document.getElementById("'.$matches[0][$x].'").value = localStorage.getItem("'.$place_name.'");';
    echo "\n"; }

The array it's using is, its made automatically by grabbing {placeholder} form a .html file the place holders change depending on the html file used

   array(1) { 
    [0]=> array(6) { 
    [0]=> string(12) "placeholders" 
    [1]=> string(15) "page_meta_title" 
    [2]=> string(6) "header" 
    [3]=> string(9) "page_text" 
    [4]=> string(8) "link_url" 
    [5]=> string(11) "button_text" } 
    }
    }

Any help would be greatly appreciated! thanks for your time.

Answer 1

You have multiple definitions of the same function. Only the last definition will be in force. All your javascript is parsed before any of it is run. So, all the saveData() definitions are parsed and only the last one is active when you then try to call it multiple times. Thus, only the last one ever executes.

It's hard to read your code or understand your intent with no code indentation, but you should probably have one saveData() function and one loadData() function and just call them multiple times, each time with different arguments.

I would recommend that you write your javascript code manually and then generate data structures with your PHP that the Javascript code can use, NOT generate Javascript code.