リロード時の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のhttps://www.npmjs.com/package/vue-persistためVue Persistパッケージを使用することにより

EDIT

。あなたのコードから

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>