Как использовать localstorage хранить статус флажка jquery mobile?

Question

<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" data-column-btn-text=""> 
     <thead> 
      <tr> 
       <th data-priority="1" id="th0">1</th> 
       <th data-priority="1" id="th1">2</th> 
       <th data-priority="1" id="th2">3</th> 
       <th data-priority="1" id="th3">4</th> 
       <th data-priority="1" id="th4">5</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
       <td>1</td> 
       <td>2</td> 
       <td>3</td> 
       <td>4</td> 
       <td>5</td> 
      </tr> 
    </tbody>  
</table> 

Я сделал таблицу, использующую jquery mobile.okay !, а затем я хочу скрыть некоторые столбцы, поэтому я нажимаю «Столбцы ...», теперь я скрывал столбцы, но как я использую localstorage для хранения моей операции, когда я обновляю эту страницу, это не все столбцы. Я знаю, что там есть «ui-checkbox-on» и «ui-checkbox-off» .... THX!

Answer 1

Для хранения данных:

localStorage.setItem("username", username); 

Для получения данных:

var username = localStorage.getItem("username"); 

В вашем случае что-то вроде:

HTML:

<input type="checkbox" onclick="toggle('.myClass', this)" > 
<div class="myClass"> 
    check 1. 
</div> 

<input type="checkbox" onclick="toggle('.myClass2', this)" > 
<div class="myClass2"> 
    check 2. 
</div> 

<input type="checkbox" onclick="toggle('.myClass3', this)" > 
<div class="myClass3"> 
    Check 3. 
</div> 

JS:

function toggle(className, obj) { 
    var $input = $(obj); 
    if ($input.prop('checked')) { 
     $(className).css("visibility", "hidden"); 
     console.log(className); 
     localStorage.setItem(className,'hidden') 
    } 
    else { 
     $(className).css("visibility", "visible"); 
     localStorage.setItem(className,'visible') 
    } 
} 

CSS:

input[type="checkbox"] { 
    clear: both; 
    float:left; 
} 

JSFiddle: https://jsfiddle.net/dudu84/jxghvoqv/2/