使用本地存储进行CSS切换开关时遇到问题

时间:2019-07-08 12:34:30

标签: javascript html local-storage

摘要:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.scrim_layout);

    String url ="http://tnm5.ma/wp-content/uploads/2019/03/11juin.jpg";
    ImageView imageView = (ImageView) findViewById(R.id.img);

    Picasso.with(this).load(url).into(imageView);




}
/* LOCAL STORAGE */
const searchUser=document.getElementById('autocomplete');
const messageUser=document.getElementById('message-user');
const timezone=document.getElementById('timezone');
const send=document.querySelector('.send');
const save=document.querySelector('.save');
const switch1=document.querySelectorAll('input[type="checkbox]')[0];
const switch2=document.querySelectorAll('input[type="checkbox]')[1];

send.addEventListener('click', function() {
    if (searchUser.value && messageUser.value) {
        localStorage.setItem("user",searchUser.value);
        localStorage.setItem("message",messageUser.value);
        window.alert("Your settings have been saved to local storage");
        location.reload();
    } else if (searchUser.value || messageUser.value) {
        window.alert("Please fill in all required fields");
    }
});

save.addEventListener('click', function() {
    if (timezone.value) {
        localStorage.setItem("timezone",timezone.value);
        localStorage.setItem("switch1", switch1.checked);
        localStorage.setItem("switch2", switch2.checked);
        window.alert("Your settings have been saved to local storage");
        location.reload();
    }
});
/* MESSAGE USERS */
/* SETTINGS */
.message-users,
.settings {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    border-top: 1px grey solid;
}
.settings {
    border-left: 1px grey solid;
}
.message-users > * {
    padding: 5px;
    margin-bottom: 10px;
}
.settings > * {
    margin-bottom: 10px
} 
.settings > label {
    padding: 10px 0;
}

select[id="timezone"] {
    margin-top: auto;
    padding: 10px;
}
.settings-buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.save,
.cancel {
    flex-basis: 48%;
}
.button {
    color: white;
    background-color: #7279C2;
    padding: 5px;
}
.cancel {
    background-color: #B2B2B2;
}

我想检查时区值,然后打开/关闭两个切换按钮,然后输出警报“您的设置已保存到本地存储。我知道我必须将切换按钮的状态保存为选中状态,并且我研究了类似的问题问题,但似乎无济于事。

第二段代码是我正在使用的代码。

1 个答案:

答案 0 :(得分:1)

发现以下控制台错误:
document.querySelectorAll('input[type="checkbox]')[0][1]
应该是:
document.querySelectorAll('input[type=checkbox]')
 (不带双引号。

(控制台在每个浏览器的 F12 上)

,还有:
else if (searchUser.value || messageUser.value)
应该是:
else if (searchUser.value=='' || messageUser.value=='')


本地存储值在浏览器检查器( F12 )的存储部分中也可见

完整的JS:

/* LOCAL STORAGE */
const searchUser  = document.getElementById('autocomplete')
  ,   messageUser = document.getElementById('message-user')
  ,   timezone    = document.getElementById('timezone')
  ,   send        = document.querySelector('.send')
  ,   save        = document.querySelector('.save')
  ,   switch1     = document.querySelectorAll('input[type=checkbox]')[0]
  ,   switch2     = document.querySelectorAll('input[type=checkbox]')[1]
  ;

send.addEventListener('click', function ()
{
  if (searchUser.value && messageUser.value)
  {
    localStorage.setItem("user", searchUser.value);
    localStorage.setItem("message", messageUser.value);
    window.alert("Your settings have been saved to local storage");
    location.reload();
  }
  else if (searchUser.value=='' || messageUser.value=='')
  {
    window.alert("Please fill in all required fields");
  }
});

save.addEventListener('click', function ()
{
  if (timezone.value) {
    localStorage.setItem("timezone", timezone.value);
    localStorage.setItem("switch1", switch1.checked);
    localStorage.setItem("switch2", switch2.checked);
    window.alert("Your settings have been saved to local storage");
    location.reload();
  }
});