1

Estou tentando manter as checkbox selecionadas mesmo após refresh na página, este é meu progresso:

// javascript
var s_item = "";

function save(items) {
    s_item = items;
    var checkbox = document.getElementById(s_item);
    localStorage.setItem(s_item, checkbox.checked);
    return s_item;
}

function load() {
    if (s_item != "") {
        var checked = JSON.parse(localStorage.getItem(s_item));
        document.getElementById(s_item).checked = checked;
    }
}
load();

// html
<input id="@item.Id" type="checkbox"  onclick="save('@item.Id');">

Na checkbox, estou tentando passar como parâmetro um id de cada checkbox que tenho com um evento onclick() e grava-los no localStorage, não sei se essa é a melhor forma para resolver meu problema porém, não está dando certo pois está dando erro com a variável global "s_item" sempre está como null.

Estou usando um foreach para fazer os checkbox em asp.net mvc.

Basicamente preciso apenas que essas checkbox selecionadas permaneçam selecionadas após um reload na página.

2 Respostas 2

0

Uma sugestão é criar apenas 1 localStorage (em vez de criar 1 para cada checkbox) e ir adicionando/excluindo a id do checkbox clicado. Ao marcar a checkbox, sua id é adicionada ao valor do localStorage, ao desmarcar, a id é excluída.

Para isso criei event handlers para capturar o click nos checkbox em vez de chamar uma função pelo onclick.

Ficaria assim:

<input id="s_item1" type="checkbox">
<input id="s_item2" type="checkbox">
<input id="s_item3" type="checkbox">

<script>
document.addEventListener("DOMContentLoaded", function(){

   var checkbox = document.querySelectorAll("input[type='checkbox']");

   for(var item of checkbox){
      item.addEventListener("click", function(){
         localStorage.s_item ? // verifico se existe localStorage
            localStorage.s_item = localStorage.s_item.indexOf(this.id+",") == -1 // verifico de localStorage contém o id
            ? localStorage.s_item+this.id+"," // não existe. Adiciono a id no loaclStorage
            : localStorage.s_item.replace(this.id+",","") : // já existe, apago do localStorage
         localStorage.s_item = this.id+",";  // não existe. Crio com o id do checkbox
      });
   }

   if(localStorage.s_item){ // verifico se existe localStorage
      for(var item of checkbox){ // existe, percorro as checkbox
         item.checked = localStorage.s_item.indexOf(item.id+",") != -1 ? true : false; // marco true nas ids que existem no localStorage
      }
   }
});
</script>
4
  • Obrigado amigo,era isso que precisava,funcionou perfeitamente.Fiz apenas uma alteração criei uma variável para incrementar como key dentro do laço de repetição:ficou assim //c# @{ string prefix = "s_item" + idcheck;} //html <input id="@prefix" type="checkbox">
    – haveros
    14/01/2018 às 20:28
  • @LeoCaracciolo Sim, só vou sair 15hrs
    – Meu ovo
    15/01/2018 às 15:32
  • @LeoCaracciolo Qual?
    – Meu ovo
    15/01/2018 às 15:35
  • @LeoCaracciolo entrei lá
    – Meu ovo
    15/01/2018 às 15:37
0

O problema consiste que você esta definindo valores a uma variável global que ao recarregar a página estará "vazia" até que haja uma nova iteração com um checkbox.

Além disso não é necessário passar um "id" no evento onclick()... você pode simplesmente passar o scopo do objeto em questão:

<input id="@item.001" name="001" type="checkbox" onclick="save(this)">

<input id="@item.002" name="002" type="checkbox" onclick="save(this)">

Não é necessário declarar uma função ("load") se o único objetivo é chamá-la apenas uma vez quando a página carregar podes simplesmente fazer uma função "auto-executável":

;(function() {
    // sua lógica aqui
})();

// ou após o HTML ser carregado sem esperar folhas de estilo, imagens, etc...
document.addEventListener('DOMContentLoaded', function(evt) {
    // sua lógica aqui
}, false);

Você deve percorrer todas as "chaves" de localStorage e testá-las contra um simples RegExp... isso levando em consideração que todos os seus "checkbox's" realmente sejam prefixados ("@item.").

Podes fazer isto usando a função key da API Storage.

// salvar
function save(target) {
    localStorage.setItem(target.id, target.checked)
}    

// função auto-executável
;(function() {
    // percorrer todas as chaves em localStorage
    for (let i = 0; i < localStorage.length; i++) {
        // testar chave
        if ( /@item\./g.test(localStorage.key(i)) ) {
            // buscar entrada (checkbox)
            let checkbox = document.getElementById(localStorage.key(i))
            if ( checkbox ) {
                checkbox.checked = JSON.parse(localStorage.getItem(localStorage.key(i)))
            }
        }
    }
})();

Demo: CODEPEN

Referencia: Mozila Docs

1
  • Amigo,funcionou,porém,só quando eu coloco o script dentro do meu laço de repetição,porque o @item.id só existe dentro do foreach,que está assim: @foreach (var item in Model){<td>dados</td> <td><input id="@item.Id.@idcheck" type="checkbox" onclick="save(this)"></td>} eu coloquei uma variável idcheck fora do laço,depois incrementei a cada item dentro do laço e coloquei como key do localstorage,deu certo,porém eu só consegui fazer colocando todo o script dentro do laço de repetição. teria algum jeito de fazer isso pegando o item.id fora do laço e passando para a função?
    – haveros
    14/01/2018 às 20:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .