本地存儲不起作用？ 不知道為什么

Question

對不起，我無法詳細說明我的問題，但我看不到任何問題。 兩個函數save()和load()在onclick上運行

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

中的代碼用於獲取所有輸入的值save其save到本地存儲中。 然后在load將保存的數據添加回表單字段

我是php和JavaScript的新手，所以它看起來可能有點混亂，但這是因為我通過php數組和for循環“生成”了該數組（數組的選擇取決於選擇的選項）

//救

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

//加載

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");
}}

僅僅為了它，這里是生成save function的php

$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";

這是用於load function的PHP

$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"; }

它使用的數組是通過抓取{placeholder}形式的.html文件自動生成的， {placeholder}根據所使用的html文件而變化

   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" } 
    }
    }

任何幫助將不勝感激！ 謝謝你的時間。

Answer 1

您具有相同功能的多個定義。 僅最后一個定義生效。 在運行任何JavaScript之前，都將對其進行解析。 因此，將解析所有saveData()定義，並且當您嘗試多次調用它時，只有最后一個處於活動狀態。 因此，只有最后一個執行。

沒有代碼縮進就很難閱讀代碼或理解意圖，但是您可能應該擁有一個saveData()函數和一個loadData()函數，並多次調用它們，每次使用不同的參數。

我建議您手動編寫javascript代碼，然后使用PHP生成Javascript代碼可以使用的數據結構，而不是生成Javascript代碼。