使用本地存儲保存並加載輸入值？

我試圖通過本地存儲器存儲所有表單字段值（在輸入ID下）像這樣localStorage.setItem("input id", fieldvalue);當用戶點擊然後「保存」按鈕。原因是在以後的日期，用戶可以選擇重新加載表單字段值，而不是重新輸入問題的所有內容，輸入ID和名稱字段都是未知的，因爲它們是根據用戶在上一頁中選擇的內容生成的（他們選擇什麼模板）。使用本地存儲保存並加載輸入值？

演示（讓我們說這是生成）：

<input type="text" id="meta_title" name="seo_meta_title"> 
<input type="text" id="meta_description" name="seo_meta_description"> 
<input type="text" id="header" name="header"> 

<!-- Submit form--> 
    <input type="submit" value="Create"> 

<!-- buttons--> 
    <button onclick="save()">save</button> 
    <button onclick="load()">load</button>

，因爲我不知道輸入的ID，我不能只是寫：

function save() { 
    if (typeof(Storage) != "undefined") { 

    //some_code_to_insert_value = x, y, z 

    localStorage.setItem("meta_title", x); 
    localStorage.setItem("meta_description", y); 
    localStorage.setItem("header", z); 
    } 
}

而且同樣適用於負載函數

// LOAD 
function load() { 
if (typeof(Storage) != "undefined") { 
    // Adds data back into form fields 

    document.getElementById("meta_title").value = localStorage.getItem("meta_title"); 
    document.getElementById("meta_description").value = localStorage.getItem("meta_description"); 
    document.getElementById("header").value = localStorage.getItem("header"); 

    } 
}

我對JavaScript很陌生，因爲我確信你可以告訴任何幫助，代碼或鏈接會很感激d和一個工作js小提琴會超出驚人的（只要它不依賴於預先知道輸入id等）。我花了幾個小時試圖做到這一點，並浪費了更多的時間嘗試生成所需的JS PHP直到我被告知這是一個可怕的方式來做到這一點。

來源

2014-12-03 Dan Fisher

您的HTML和JavaScript這兩種非法字符。 – 2014-12-03 13:55:02

這裏輸錯了'（「」meta_description「）'項目名稱前的兩個引號 – jtheman 2014-12-03 13:55:09

對不起會正確，那只是演示代碼不起作用，只是舉個例子 – 2014-12-03 13:57:09

如果你想依靠的jQuery這可以幫助你：

$('#save').on('click', function(){ 

    $('input[type="text"]').each(function(){  
     var id = $(this).attr('id'); 
     var value = $(this).val(); 
     localStorage.setItem(id, value); 

    }); 
}); 

$('#load').on('click', function(){ 
    $('input[type="text"]').each(function(){  
     var id = $(this).attr('id'); 
     var value = localStorage.getItem(id); 

     $(this).val(value); 

    }); 
});

我會建議，以避免內聯JS，所以我更新的代碼使用.on()用於連接click -handler的兩個按鈕。

Demo

參考：

.each()

來源

2014-12-03 14:02:26 empiric

哇太謝謝了這太完美了jQuery是100 ％罰款，這正是我想要的！再次感謝您的時間！對我意味着這麼多！會回來，upvote這一次我有15代表它需要！ – 2014-12-03 14:55:05

不客氣，很高興我可以幫你 – empiric 2014-12-03 14:59:42

這剛剛在我的應用程序中爲我節省了200小時的動態表單域的編程變量謝謝@empiric !!!! – MizAkita 2015-03-15 17:51:36

Replace Html Code And Script File 
    <form method='post' id='myform'> 
    <input type="text" id="meta_title" name="seo_meta_title"> 
    <input type="text" id="meta_description" name="seo_meta_description"> 
    <input type="text" id="header" name="header"> 

    <!-- Submit form--> 
     <input type="submit" id="save" value="Create"> 

    <!-- buttons--> 
     <button onclick="save()">save</button> 
     <button onclick="load()">load</button> 
    </form> 
    <script> 
    $('#save').on('click', function(){ 
     var post_vars = $('#myform').serializeArray(); 
     localStorage.setItem(id, post_vars); 
    }); 
    </script>

來源

2018-02-13 11:34:17

使用本地存儲保存並加載輸入值？

回答

相關問題