如何在關閉或重新加載後顯示相同的內容

嗨我寫了一個代碼，其中本地存儲應用於頁面上的選項。我遇到的唯一問題是我無法保存選項搜索的頁面。正如你可以在js小提琴中看到的那樣。即使在刷新之後，選項仍保持相同狀態。但是當你點擊搜索功能。將這些選項應用到您的圖像。但是當你刷新頁面時，它會回到原來的位置。我如何保持刷新後的相同顯示如何在關閉或重新加載後顯示相同的內容

這是我的本地存儲代碼，它適用於選項，但不適用於顯示搜索的內容。代碼https://jsfiddle.net/387tnzoy/4/

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

    $('select').each(function() { 
    var id = $(this).attr('name'); 
    var value = $(this).find("option:selected").val(); 
    console.log("SetItem : " + id + " with value : " + value) 
    localStorage.setItem(id, value); 

    }); 
}); 

$(document).ready(function() { 
    $('select').each(function() { 
    var id = $(this).attr('name'); 
    if (localStorage.getItem(id) !== null) { 
    var value = localStorage.getItem(id); 
    $(this).val(value) 
    } 

    }); 
})

的js小提琴（注意函數無法正常工作） JS的小提琴確實顯示的代碼只是讓你可以得到什麼正在發生的事情，例如一個想法。當我在pi的生活中應用諸如動畫之類的過濾器並單擊提交按鈕時，它將僅顯示pi圖像undreneath的選項，因爲它是唯一一個用該選項設置的選項。現在唯一的問題是我希望本地存儲保存該頁面。所以，當我刷新它仍然在那個顯示器上。

來源

2017-03-17 cars

你的小提琴缺少jQuery。這是一個與添加的版本：https://jsfiddle.net/387tnzoy/4/添加缺少的庫後，選擇似乎工作得很好，選擇保存並從localstorage加載？ – Kaivosukeltaja

$('select option').each(function() { 
    var id = $(this).attr('name'); 
    if (localStorage.getItem(id) != null && id=='name') { 
     $(this).attr("selected", "selected"); 
    } 

    });

來源

2017-03-17 08:45:12

您只需在填充選項後運行過濾。請注意，在運行JavaScript之前，它們仍會在屏幕上閃爍，因此您可能希望在屏幕上隱藏它們。

$(document).ready(function() { 
    $('select').each(function() { 
    var id = $(this).attr('name'); 
    var value = localStorage.getItem(id); 
    $(this).val(value) 
    }); 

    $('#browsepagebutton').click(); // Add this 
})

更新小提琴：https://jsfiddle.net/387tnzoy/6/

來源

2017-03-17 08:30:09 Kaivosukeltaja

你是什麼意思，它仍然會閃爍 – cars

我明白你的意思，但我將如何保持它們隱藏，直到 – cars

結果將在頁面加載並在JavaScript執行後消失/更改的短暫時刻。 – Kaivosukeltaja

如下所述有你的提琴多個問題。

從搜索按鈕中刪除onclick="saveValues()"。
檢查文件準備，如果localstorage具有價值比你localStorage校驗碼打
你新年下拉都像<option value="5">2013</option> <option value="5">2014</option> <option value="5">2015</option>多個選項相似的值，你可以看到相同的值5這裏
是的@kaivosukeltaja提到你點擊Search如果localStorage的對ready事件值

我已經更新小提琴你可以找到here

來源

2017-03-17 08:42:56 Curiousdev

如何在關閉或重新加載後顯示相同的內容

回答

相關問題