Блог

Главная - Вопросы по программированию - Локальное хранилище onClick toggleClass

Локальное хранилище onClick toggleClass

#jquery

Вопрос:

Я хочу, чтобы следующая операция была сохранена в локальном хранилище после нажатия, но я не получаю никаких результатов

 burger.on('click', function () {
 page.toggleClass('toggle');
 sidebar.toggleClass('active');
});

Комментарии:

1. Потому что я не вижу никакого кода для сохранения данных в локальном хранилище

2. вам нужно добавить дополнительную информацию(контекст) в свой вопрос. Какие данные вы хотите сохранить в локальном хранилище? Является ли статус страницы статусом боковой панели?

Ответ №1:

Можете ли вы поделиться тем, что хотите сохранить в localstorage? здесь вы пропустили добавление данных в код локального хранилища.

Если вы хотите сохранить что-то в localstorage, вы можете сделать это примерно так…

добавить

 localStorage.setItem("mytime", Date.now());

получить

 var x = localStorage.getItem("mytime");

Ответ №2:

Предполагая, что вы хотите использовать localStorage для сохранения состояния макета страницы и боковой панели:

 // Set a default object for your layout state
const DEFAULT_STATE = {
  page: false,
  sidebar: false
};

// Create a namespace for your object that will be set into localStorage
const NAMESPACE = 'YOUR_APP_NAME';

// Call once to init your workspace default values
const init = function() {
  localStorage.setItem(NAMESPACE, JSON.stringify(DEFAULT_STATE));
}

// Generic function to get the whole state object or just a specific item from it
const getState = function(specificItem) {
  const state = JSON.parse(localStorage.getItem(NAMESPACE));
  return state[specificItem] || state;
}

// Generic function to change state
const changeState = function(itemToChange, newState) {
  if (!itemToChange amp;amp; !newState) {
    // If no props are given, quit this function
    return;
  }
  
  if (itemToChange amp;amp; !newState) {
    // If only a single parameter is given, rewrite the entire state with what is given
    localStorage.setItem(NAMESPACE, itemToChange);
    return;
  }
  
  if (itemToChange amp;amp; newState) {
    // If both parameters are given, rewrite the specific, provided key
    let currentValue = getState();
    currentValue[itemToChange] = newState;
    localStorage.setItem(NAMESPACE, currentValue);
  }
}

init();

burger.on('click', function () {
  const CURRENT_STATE = getState();

  // Update the current state variable
  CURRENT_STATE.page = !CURRENT_STATE.page;
  CURRENT_STATE.sidebar = !CURRENT_STATE.sidebar;

  // Supposing that your "page" and "sidebar" are referencing a DOM element
  CURRENT_STATE.page ? page.classList.add('toggle') : page.classList.remove('toggle');
  CURRENT_STATE.sidebar ? sidebar.classList.add('active') : sidebar.classList.remove('active');
  
  
  // Write the new state into localStorage
  setState(CURRENT_STATE);
});
Метки: