重新加載HTML5本地存儲無法正常工作

Question

爲了減少這一點，我有一排複選框，我試圖讓它在點擊時保存並保持瀏覽器重新加載。

我有陣列輸出到本地存儲，但它是不節能，這裏是迄今爲止代碼：

<section class="column"> 
    <label><input type="checkbox" name="BBCNews" class="checked" v-model="isBBCNews"><span>BBC News</span></label> 
    <label><input type="checkbox" name="BBCSport" class="checked" v-model="isBBCSport"><span>BBC Sport</span></label> 
    <label><input type="checkbox" name="TheTelegraph" class="checked" v-model="isTheTelegraph"><span>The Telegraph</span></label> 
    <label><input type="checkbox" name="TheIndependent" class="checked" v-model="isTheIndependent"><span>The Independent</span></label> 
</section> 

<section class="column"> 
    <label><input type="checkbox" name="LadBible" class="checked" v-model="isLadBible"><span>Lad Bible</span></label> 
    <label><input type="checkbox" name="HackerNews" class="checked" v-model="isHackerNews"><span>Hacker News</span></label> 
    <label><input type="checkbox" name="Reddit" class="checked" v-model="isReddit"><span>Reddit</span></label> 
    <label><input type="checkbox" name="ProductHunt" class="checked" v-model="isProductHunt"><span>Product Hunt</span></label> 
</section> 

，這裏是當前的javascript代碼

// Store services to local 
    var enabledServices = JSON.parse(localStorage.getItem('enabledServices')) || {}, 

    $checkboxes = $("input[type='checkbox']"); 
    $checkboxes.on("change", function(){ 
    $checkboxes.each(function(){ 
     enabledServices[this.name] = this.checked; 
    }); 

    localStorage.setItem("enabledServices", JSON.stringify(enabledServices)); 
    }); 

    // On page load 
    $.each(enabledServices, function(key, value) { 
    $("#" + key).prop('checked', value); 
    }); 

，這裏是陣列顯示在本地存儲screenshot

我想完全消失的選項，但一個簡單的假會做，目前當我刷新所有車ckboxes回到當前狀態。

任何幫助表示讚賞。

編輯

通過使用Vue Persist包Vue公司https://www.npmjs.com/package/vue-persist我達到我需要的東西。

Answer 1

從你的代碼沒有id分配給複選框，所以下面將失敗：

$("#" + key).prop('checked', value); 

什麼你寫localstoragekey是名稱。更改爲以下名稱以獲取複選框並更新checked屬性。

$("[name='" + key + "']").prop('checked', value); 

// Store services to local 
 
var enabledServices = JSON.parse(localStorage.getItem('enabledServices')) || {}, 
 

 
$checkboxes = $("input[type='checkbox']"); 
 
$checkboxes.on("change", function() { 
 
\t $checkboxes.each(function() { 
 
\t \t enabledServices[this.name] = this.checked; 
 
\t }); 
 

 
\t localStorage.setItem("enabledServices", JSON.stringify(enabledServices)); 
 
}); 
 

 
// On page load 
 
$.each(enabledServices, function (key, value) { 
 
\t $("[name='" + key + "']").prop('checked', value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<section class="column"> 
 
\t <label><input type="checkbox" name="BBCNews" class="checked" v-model="isBBCNews"><span>BBC News</span></label> 
 
\t <label><input type="checkbox" name="BBCSport" class="checked" v-model="isBBCSport"><span>BBC Sport</span></label> 
 
\t <label><input type="checkbox" name="TheTelegraph" class="checked" v-model="isTheTelegraph"><span>The Telegraph</span></label> 
 
\t <label><input type="checkbox" name="TheIndependent" class="checked" v-model="isTheIndependent"><span>The Independent</span></label> 
 
</section> 
 

 
<section class="column"> 
 
\t <label><input type="checkbox" name="LadBible" class="checked" v-model="isLadBible"><span>Lad Bible</span></label> 
 
\t <label><input type="checkbox" name="HackerNews" class="checked" v-model="isHackerNews"><span>Hacker News</span></label> 
 
\t <label><input type="checkbox" name="Reddit" class="checked" v-model="isReddit"><span>Reddit</span></label> 
 
\t <label><input type="checkbox" name="ProductHunt" class="checked" v-model="isProductHunt"><span>Product Hunt</span></label> 
 
</section>