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！然后我想要隐藏一些列，所以我点击了＃34;列......＆＃34; ，现在我隐藏了列，但我如何使用localstorage商店我的操作，当我刷新此页面时，并非所有列都显示。我知道有＆＃39; ui-checkbox-on＆＃39;和＆＃39; ui-checkbox-off＆＃39; .... 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/

如何使用localstorage存储jquery mobile的复选框状态？

1 个答案: