Использование localstorage и флажки для настройки меню

Question

У меня есть страница конфигурации с флажками ON/OFF, которые я хотел бы контролировать, скрыт или нет элемент в меню.

Пример раздела меню:

<ul class="accordion"> 
    <li id="whyReplace"><a href="#">header</a> 
     <ul class="sub-menu"> 
      <li><a href="#"><em>01</em> sub1</a></li> 
      <li><a href="#"><em>02</em> sub2</a></li> 
      <li><a href="#"><em>03</em> sub3</a></li> 
     </ul> 
    </li> 
</ul> 

Пример флажка ON/OFF:

<div class="control-group"> 
    <div class="controls"> 
     <label class="checkbox"> 
      <div class="switch"> 
       <input data-toggle-id="whyReplace" type="checkbox" checked /> 
      </div> 
      Why should you replace? 
     </label> 
    </div> 
</div> 

По умолчанию, все проверены, так как я хочу, чтобы все заголовки меню видны. Отсюда я хотел бы сохранить любое изменение флажка в localstorage, и если они решили отключить кнопку, то .hide(); соответствующий заголовок с использованием совпадающего идентификатора данных.

Я смотрел на эту страницу за помощью, но это только помогает мне делать половину того, что мне нужно:

http://www.simonbingham.me.uk/index.cfm/main/post/uuid/using-html5-local-storage-and-jquery-to-persist-form-data-47

Я должен добавить, что для этого проекта, я использую PhoneGap и Xcode для публикации это приложение для iPad, поэтому я тестировал в Safari. Эти сохраненные переменные должны быть постоянными на всех других страницах, поэтому меню настраивается на основе того, какие кнопки были включены/выключены.

Используя что-то вроде:

$(document).ready(function() { 
    var storage = window.localStorage; 
    for (var key in storage) { 
     var menuhead = storage[key]; 
     if ($(menuhead).attr("checked") { 
      $('li#' + menuhead).show(); 
     } else { 
      $('li#' + menuhead).hide(); 
     } 
    } 
}); 

мне нужно знать, как хранить флажки LocalStorage, что я хочу, чтобы скрыть (выключено), цикл через эти переменные хранятся и затем .hide(); элемент меню, идентификатор которого совпадает с идентификатором-переключателем данных.

Answer 1

Вот рабочий пример: http://jsfiddle.net/VcGjx/ Обратите внимание, что она использует JQuery и работает onDomReady

Вы также можете использовать куки вместо LocalStorage, то на стороне сервера скрипт установлен скрытый/проверил атрибуты соответственно на основе значение cookie. Таким образом, вы не получите вспышку элементов, прежде чем они будут скрыты, что может случиться с JavaScript.

Редактировать: чтобы это работало с помощью переключателя начальной загрузки, вам нужно использовать событие изменения вместо щелчка, так как на него нажимается не переключатель. http://jsfiddle.net/ukrb3/5/

Answer 2

Вот еще один способ сделать это, используя массив, чтобы друг помог мне разобраться.

Демо: http://jsfiddle.net/HrXp5/12/

HTML-:

<ul id="menu"> 
    <li id="list0">Widgets</li> 
    <li id="list1">Gadgets</li> 
</ul> 

<h3>Toggle Menu's</h3> 

<ul id="menu-toggles"> 
    <li>Widgets: 
     <button type="button" id="toggle0" data-menuhead="list0" class="btn btn-primary menu-toggle" data-toggle="button">On</button> 
    </li> 
    <li>Gadgets: 
     <button type="button" id="toggle1" data-menuhead="list1" class="btn btn-primary menu-toggle" data-toggle="button">On</button> 
    </li> 
</ul> 

JS:

var menu_storage_key = 'menu_items_off'; 
var menu_items_off = new Array(); 

if ('localStorage' in window && window['localStorage'] !== null) { 
    var storage = window.localStorage; 
} 

$(document).ready(function() { 
    $('.menu-toggle').click(function() { 
     if ($(this).html() == 'On') { 
      $(this).html('Off'); 
      if(menu_items_off.indexOf($(this).data('menuhead')) < 0) { 
       menu_items_off.push($(this).data('menuhead')); 
      } 
     } else { 
      $(this).html('On'); 
      $('#' + $(this).data('menuhead')).show(); 
      var new_array = new Array(); 
      if(menu_items_off.indexOf($(this).data('menuhead')) >= 0) { 
       for (i=0; i < menu_items_off.length; i++) { 
        if(menu_items_off[i] != $(this).data('menuhead')) { 
         new_array.push(menu_items_off[i]); 
        } 
       } 
       menu_items_off = new_array; 
      } 
     } 
     persist_data(menu_storage_key, menu_items_off); 
     update_menu(); 
    }); 

    // running on document load 
    load_menu_storage(); 
    update_menu(); 
    update_toggles(); 
}); 

function load_menu_storage() { 
    // check to see if value exists 
    if(storage.getItem(menu_storage_key) == null) { 
     // if it doesn't exist, set it to empty array and return 
     persist_data(menu_storage_key, new Array()); 
     return; 
    } 
    menu_items_off = get_data(menu_storage_key); 
} 

function update_menu() { 
    // value exists, iterate through and set items off 
    for (i=0; i < menu_items_off.length; i++) { 
     $('#' + menu_items_off[i]).hide(); 
    } 
} 

function update_toggles() { 
    // value exists, iterate through and set items off 
    for (i=0; i < menu_items_off.length; i++) { 
     $('.menu-toggle').each(function() { 
      if(menu_items_off[i] == $(this).attr('data-menuhead')) { 
       $(this).html('Off'); 
       $(this).addClass('active'); 
      } 
     }); 
    } 
} 

function persist_data(key, data) { 
    storage.setItem(key, JSON.stringify(data)); 
} 

function get_data(key) { 
    return JSON.parse(storage.getItem(key)); 
}