Блог

У меня есть кнопка, которую я делаю полностью из JS.

Я хочу сохранить, было ли оно в состоянии true или false, чтобы, если пользователь покинет страницу, кнопка была в том же состоянии, когда они вернутся. Я хотел бы использовать localStorage, но я относительно новичок в JS, поэтому они могут быть лучшим решением.

Текущий код:

 var btn;
var btn = document.createElement("BUTTON");
btn.onclick =  function() {myFunction()};
btn.style.height = "100%";
btn.style.width = "98%";
btn.style.border = "0px";
btn.innerHTML = "CLICK ME";  
btn.id = "toggle";


document.getElementById("button").appendChild(btn);

function myFunction() {
    document.getElementById('notepad').classList.toggle('hide'); return false
}
  

Редактировать код:

 window.onload = function initBt(){
var buttonState = localStorage.getItem('mybutton');
if ( null !== buttonState )
{
buttonState amp;amp; document.getElementById('notepad').classList.add('hide');
}
}
var btn;


var btn = document.createElement("BUTTON");
btn.onclick =  function() {myFunction()};
btn.style.height = "100%";
btn.style.width = "98%";
btn.style.border = "0px";
btn.innerHTML = "CLICK ME";  


btn.id = "toggle";


document.getElementById("button").appendChild(btn);


function myFunction() {
var bt = document.getElementById('notepad');
bt.classList.toggle('hide');
localStorage.setItem('mybutton', bt.classList.contains('hide'))
return false;
}
  

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

Документация localStorage

 function store(key, data)
{
    localStorage.setItem(key, JSON.stringify(data));
}

function retrieve(key)
{
   var data = localStorage.getItem(key);
   return data ? JSON.parse(data) : null;
}

function remove(key)
{
   localStorage.removeItem(key);
}
  

примеры использования:

 store('mybutton', buttonState);
var buttonState = retrieve('mybutton');
if ( buttonState !== null )
{
   /* set button State*/
}
else
{
   /* state has not been saved before, initialise */
}
  

ПРИМЕЧАНИЕ поскольку localStorage может обрабатывать ТОЛЬКО строковые значения, мы используем JSON.stringify при сохранении для создания строки из данных и JSON.parse при извлечении для хранения и извлечения произвольных данных (которые, конечно, являются допустимыми структурами JSON)

Для вашего обновленного вопроса попробуйте следующее (было бы полезнее, если бы была добавлена вся структура html, поскольку некоторые элементы отсутствуют, но в любом случае):

 // include the needed localStorage manipulation methods
function store(key, data)
{
    localStorage.setItem(key, JSON.stringify(data));
}
function retrieve(key)
{
   var data = localStorage.getItem(key);
   return data ? JSON.parse(data) : null;
}
function remove(key)
{
   localStorage.removeItem(key);
}

// create and initialise the button
var btn = document.createElement("BUTTON");
btn.onclick =  function() {myFunction()};
btn.style.height = "100%";
btn.style.width = "98%";
btn.style.border = "0px";
btn.innerHTML = "CLICK ME";  
btn.id = "toggle";
document.getElementById("button").appendChild(btn);
var buttonState = retrieve('mybutton');

// make sure at this point element with id="notepad" exists on page
if ( null !== buttonState )
{
    buttonState amp;amp; document.getElementById('notepad').classList.add('hide');
}

function myFunction() {
var bt = document.getElementById('notepad');
bt.classList.toggle('hide');
store('mybutton', bt.classList.contains('hide'));
return false;
}
  

Для гибкой библиотеки кэширования для веб / браузера, которая может поддерживать различные механизмы хранения (а также поддержку серверного php и node.js ) проверьте Unicache (ps. Я автор)

Конечно, есть и другие библиотеки (например, localForage)