Как добавить js в local storage или cookie

Web Frontend: JavaScript, HTML/CSS
#1

Добрый день уже замучался с данной темой , но как говориться спросишь не узнаешь

у меня есть скрипт который через js включает темную тему при нажатии кнопки

я его установил на свой сайт gor.ovh ( только в моб версии при нажатии на три полоски в верхнем углу если что можно посмотреть в респонсиве страницы )

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

как я понял нужно записывать данные в локал сторадж или куки я попробовал сделать по примерам которые были опубликованы на этом форуме ранее , нр у меня не вышло

https://jsfiddle.net/yguzhp0f/5/

<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.27/darkreader.js"></script>
<button onclick=enableDark() style="color: white;
    top: 10px;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(to left bottom, rgb(72, 204, 254), rgb(89, 20, 182));
    border: none;">Темный</button>
        <button onclick=disableDark() style="color: white;
    top: 10px;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(to left bottom, rgb(72, 204, 254), rgb(89, 20, 182));
    border: none;">Светлый</button>
<script>
        function disableDark() {
            DarkReader.disable();
        }
        function enableDark() {
            DarkReader.enable({
            brightness: 100,
            contrast: 90,
            sepia: 10
        });
        }
</script>

Помогите пжжж

Темный
Светлый

#2

А в чем именно проблема? Что вышло?

Window.localStorage - Web APIs | MDN

setItem при вызове смены темы, getItem и вызов нужной функции при загрузке страницы (например просто в конце этого <script>).

#3

Здравствуйте
я уже знаю что надо setItem , но не могу представить как это написать

#4

А на каком этапе проблема?

В функциях, где меняется тема, надо просто записать в какой-нибудь ключ (например, theme) или название темы (dark, light, …), или просто true/false раз тут всего две.

И потом доставать по этому ключу значение, вызывать нужную функцию смены темы.

#5

я уже 3 дня пытаюсь сделать не могу если не сложно можете написать и дать скрипт

#6

Так покажите что получилось )

#7

щас покажу не которые варианты которые я пробовал

<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.27/darkreader.js"></script>
<button onclick=enableDark() style="color: white;
    top: 10px;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(to left bottom, rgb(72, 204, 254), rgb(89, 20, 182));
    border: none;">Темный</button>
        <button onclick=disableDark() style="color: white;
    top: 10px;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(to left bottom, rgb(72, 204, 254), rgb(89, 20, 182));
    border: none;">Светлый</button>
<script>
        function disableDark() {
            DarkReader.disable();
        }
        function enableDark() {
            DarkReader.enable({
            brightness: 100,
            contrast: 90,
            sepia: 10
        });
        }
window.localStorage.setItem(‘theme’, ‘dark’)
</script>


щас покажу не которые варианты которые я пробовал 

<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.27/darkreader.js"></script>
<button onclick=enableDark() style="color: white;
    top: 10px;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(to left bottom, rgb(72, 204, 254), rgb(89, 20, 182));
    border: none;">Темный</button>
        <button onclick=disableDark() style="color: white;
    top: 10px;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(to left bottom, rgb(72, 204, 254), rgb(89, 20, 182));
    border: none;">Светлый</button>
<script>
        function disableDark() {
            DarkReader.disable();
        }
        function enableDark() {
            DarkReader.enable({
            brightness: 100,
            contrast: 90,
            sepia: 10
        });
window.localStorage.setItem(‘theme’, ‘dark’)
        }
</script>

щас покажу не которые варианты которые я пробовал 

<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.27/darkreader.js"></script>
<button onclick=enableDark() style="color: white;
    top: 10px;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(to left bottom, rgb(72, 204, 254), rgb(89, 20, 182));
    border: none;">Темный</button>
        <button onclick=disableDark() style="color: white;
    top: 10px;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(to left bottom, rgb(72, 204, 254), rgb(89, 20, 182));
    border: none;">Светлый</button>
<script>
        function disableDark() {
            DarkReader.disable();
        }
        function enableDark() {
            DarkReader.enable({
            brightness: 100,
            contrast: 90,
            sepia: 10
        });
        }
 localStorage.setItem(‘theme’, ‘dark’)
</script>

щас покажу не которые варианты которые я пробовал 

<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.27/darkreader.js"></script>
<button onclick=enableDark() style="color: white;
    top: 10px;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(to left bottom, rgb(72, 204, 254), rgb(89, 20, 182));
    border: none;">Темный</button>
        <button onclick=disableDark() style="color: white;
    top: 10px;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(to left bottom, rgb(72, 204, 254), rgb(89, 20, 182));
    border: none;">Светлый</button>
<script>
        function disableDark() {
            DarkReader.disable();
        }
        function enableDark() {
            DarkReader.enable({
            brightness: 100,
            contrast: 90,
            sepia: 10
        });localStorage.setItem(‘theme’, ‘dark’)
        }

</script>
#8

Это надо внутри

Так оно просто вызывается при любом открытии страницы.

При вставке кода на форумах надо нажимать кнопку Код.