时间戳

首页 > 解决方案 > Javascript本地存储不存储所有内容

javascript - Javascript本地存储不存储所有内容

问题描述

所以我想向这个项目添加本地存储，但它只保存前 2 个复选框，而不是全部。我想做一个习惯跟踪器，你要检查你完成的天数，所以当你重新加载页面时，你完成一个习惯的天数会被检查。到目前为止，我只有页面的基本布局，没有实际的习惯部分或样式。我正在尝试首先处理复选框部分。

任何帮助将不胜感激。代码如下：

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Local Storage Test</title>
  </head>
  <body>
    <!-- <p>Last Saved Item: <span id="saved">_____</span></p>
    <input id="username" type="text"></input>
    <button onclick="store()">Save</button>
    <br><br>
    <p id="confirm"></p> -->
    <h2 id="Haading">Habbit Tracker</h2><br>
    <div class="habbits">
      <input type="text" placeholder="Enter A Habbit Here"><button class="add" onclick="add()">Add</button><br><br>
    </div>
    <div class="days">
    <input onclick="save()" type="checkbox" id="Mon">Monday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Tue">Tuesday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Thu">Wednesday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Fri">Thursday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Sun">Friday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Sat">Saturday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Sun">Sunday</input>
    </div>

    <script src="script.js" charset="utf-8"></script>
  </body>
</html>

Javascript

function save(){
    var checkbox1 = document.getElementById('Mon');
    localStorage.setItem('monday', checkbox1.checked);

    var checkbox2 = document.getElementById('Tue');
    localStorage.setItem('tuesday', checkbox2.checked);

    var checkbox3 = document.getElementById('Wed');
    localStorage.setItem('wednesday', checkbox3.checked);

    var checkbox4 = document.getElementById('Thu');
    localStorage.setItem('thursday', checkbox4.checked);

    var checkbox5 = document.getElementById('Fri');
    localStorage.setItem('friday', checkbox5.checked);

    var checkbox6 = document.getElementById('Sat');
    localStorage.setItem('saturday', checkbox6.checked);

    var checkbox7 = document.getElementById('Sun');
    localStorage.setItem('sunday', checkbox7.checked);
}

function load(){
    var checked1 = JSON.parse(localStorage.getItem('monday'));
    document.getElementById("Mon").checked = checked1;

    var checked2 = JSON.parse(localStorage.getItem('tuesday'));
    document.getElementById("Tue").checked = checked2;

    var checked3 = JSON.parse(localStorage.getItem('wednesday'));
    document.getElementById("Wed").checked = checked3;

    var checked4 = JSON.parse(localStorage.getItem('thursday'));
    document.getElementById("Thu").checked = checked4;

    var checked5 = JSON.parse(localStorage.getItem('friday'));
    document.getElementById("Fri").checked = checked5;

    var checked6 = JSON.parse(localStorage.getItem('saturday'));
    document.getElementById("Sat").checked = checked6;

    var checked7 = JSON.parse(localStorage.getItem('sunday'));
    document.getElementById("Sun").checked = checked7;
}

load();

标签： javascripthtml

解决方案

这 3 个输入文件的 ID 是错误的。

    <input onclick="save()" type="checkbox" id="Thu">Wednesday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Fri">Thursday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Sun">Friday</input>
    <br>

所以你的js代码在这里抛出一个错误：

document.getElementById("Wed").checked = checked3;

将您的 html 更改为：

    <input onclick="save()" type="checkbox" id="Wed">Wednesday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Thu">Thursday</input>
    <br>
    <input onclick="save()" type="checkbox" id="Fri">Friday</input>
    <br>

它会起作用

推荐阅读