如何使用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/