Как сохранить функцию в Local Storage

Question

У меня есть кнопки которые изменяют цвет страницы хочу сделать так чтоб после рефреша изменение не пропалась. Вот тут JS

let red = function red(){ document.body.style.background = 'red'}
let blue = function blue(){ document.body.style.background = 'blue'}
localStorage.setItem('colour', red.toString())
localStorage.setItem('colour', blue.toString())
localStorage.getItem('color')
localStorage.getItem('colour')

Answer 1

Пример сохранения настроек. Он не идеальный, но от него можно отталкиваться.

Надо нажать "save settings", чтобы сохранить 'типа новые настройки', затем "load settings" чтобы их загрузить.

let defaultSettings = {
    color: 'black',
    text: 'test text',
    fontSize: 14
}

let newSettings = {
    color: 'blue',
    text: 'test text 2321 3213 1',
    fontSize: 32
}

$(document).ready(function() {            
    loadSettingsIfExistsAndApply();    
});

$('#save-settings').on('click', function() {
    localStorage.setItem('settings', JSON.stringify(newSettings));
});

$('#load-settings').on('click', function() {
   loadSettingsIfExistsAndApply();
});

$('#reset-settings').on('click', function() {
   localStorage.removeItem('settings');
   loadSettingsIfExistsAndApply();
});


function loadSettingsIfExistsAndApply() {
    let settings = JSON.parse(localStorage.getItem('settings'));
    
    if (!settings)
        settings = defaultSettings;
        
    $('#test').text(settings.text);
    $('#test').css({ color: settings.color, fontSize: settings.fontSize });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<div id="test">123</div>

<button id="save-settings">save settings</button>
<button id="load-settings">load settings</button>
<button id="reset-settings">reset settings</button>

Пример на jsfiddle, потому что тут не работает в sandboxe

https://jsfiddle.net/kx2ae7cu/

БЛОГ НА HUSL

Как сохранить функцию в Local Storage

Ответы (1 шт):