重新加载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>