Как сохранить атрибуты html элементов в localStorage?

Question

alex_643 @alex_643

JavaScript

Как сохранить атрибуты html элементов в localStorage?

Нужно сохранить атрибут 'style' html элемента в localStorage и взять его от туда при обновлении.
JS:

//По клику фон становится зелёным . 
(document).on('click', '.tdItem', function(e){
    $(e.target).css({'background': 'lightgreen'});
})

HTML:

<html>
    <head>
        <meta charset="utf-8"/>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <!-- элемент с классом tdItem -->
        <li class = 'tdItem'>qwerty<li>
        <!-- подключение JS и Jquery -->
        <script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
        <script src = 'Pro.js' ></script>
    </body>
</html>

CSS:

.tdItem{
    position: relative;
    top: 70px;
    font-size: 19px;
    text-align-last: center;
    padding: 10px;
    border-radius: 5px;
    cursor: default;
    list-style: none;
}
.tdItem:hover{
    background: lightblue; 
}

Вопрос задан более трёх лет назад
278 просмотров

Комментировать

Подписаться 1 Средний Комментировать

Пригласить эксперта

Ответы на вопрос 2

4 комментария

alex_643 @alex_643 Автор вопроса

Но мне нужно с помощью Jquery изменить свойство . и сделать так что бы оно остовалось у данного элемента .

Написано более трёх лет назад
Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

alex_643, вообще без разницы. Работайте с джэкью, просто в локал... записываете вышеописанным образом

Написано более трёх лет назад

alex_643 @alex_643 Автор вопроса

Шохрух Шаймардонов, а если несколько элементов? Потом мне нужно брать элемент из local Storage а при выводе всех элементов надо проверить каждый. Вот код всей программы .

var tdList = $('#tdZone div');
var tdMask = 'tdl_';
function showTasks(){
    var isLen = localStorage.length;
    if(isLen > 0){
        for(var i = 0; i < isLen; i++){
            var key = localStorage.key(i);
            if (key.indexOf(tdMask) == 0){
                $('<li></li>').addClass('tdItem').attr('data-itemid', key).attr('data-itemid'))).text(localStorage.getItem(key)).appendTo(tdList);
            }
        }
    }
}
showTasks()
var nId;
var str;
 alert($('.tdItem').attr('data-itemid'));
$('#tdZone input').on('keydown', function(e){
    if (e.keyCode != 13){
        return;
    }
    var str = e.target.value;
    e.target.value = '';
    if (str.length > 0){
        var nId = 0;
        tdList.children().each(function(index, el){
            var jelId = $(el).attr('data-itemid').slice(4);
            if(jelId > nId){
                nId = jelId;
            }
        })
        nId++;
        localStorage.setItem(tdMask + nId, str);
        $('<li></li>').addClass('tdItem').attr('data-itemid', tdMask + nId).attr('data-itemid'))).text(str).appendTo(tdList);
    }
});
<code lang="html">

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8"/>
        <title>CC</title>
        <link href="style.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
    </head>
    <body>
        <div>
            <a id = 'header'></a>
            <p id = 'username'></p>
            <button id = 'speech' onclick = 'speech()'>VOICE ASSISTENT</button>
            <nav>
                <ul>
                    <li><a href = "Pro.html">Main</a></li>
                    <li><a href = "TBL.html">To do list</a></li>
                    <li><a href = "Sing.html">Sing in</a></li>
                    <li><a href = "Reg.html">Create an account</a></li>
                </ul>
            </nav>
        </div>
        <section id = "tdZone">
            <div>
            </div>
            <input type = 'text' placeholder = 'What are you going to do today?' autocomplete = 'off' id = 'tdInput'>
        </section>
    </body>
    <script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
    <script src = 'Pro.js' ></script>
</html>


</code>

Написано более трёх лет назад

Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

alex_643, залили бы в песочницу. Ну да. Придется циклом записывать, и также считывать

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Простой
События click и touchstart странное поведение на мобильном, как решить?
- 1 подписчик
- 49 минут назад
- 3 просмотра
0

ответов
JavaScript

Простой
Стоит ли использовать lodash сейчас?
- 1 подписчик
- час назад
- 37 просмотров
1

ответ
JavaScript

Простой
Как сделать проверку на корректную вложенность в скобки ((([])){})?
- 1 подписчик
- час назад
- 51 просмотр
1

ответ
JavaScript

Простой
Как на javascript преобразовать секунды в часы минуты сенуды?
- 1 подписчик
- 2 часа назад
- 41 просмотр
0

ответов
JavaScript

Простой
Как решить ошибку Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')?
- 1 подписчик
- 5 часов назад
- 34 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- 20 часов назад
- 82 просмотра
0

ответов
JavaScript

Простой
По какой логике bind принимает только первый контекст?
- 1 подписчик
- вчера
- 94 просмотра
2

ответа
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- вчера
- 34 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Как сделать выборку mongo?
- 1 подписчик
- вчера
- 36 просмотров
0

ответов
JavaScript

Средний
Запись в cookie или localStorage только при открытии страницы?
- 1 подписчик
- вчера
- 54 просмотра
3

ответа
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Парсер-робот под Desktop Windows на C# или .NET или WPF

27 апр. 2024, в 20:22

20000 руб./за проект

Разработчик Playable Ads (Unity)

27 апр. 2024, в 19:58

2500 руб./в час

Браузерное расширение

27 апр. 2024, в 19:48

10000 руб./за проект

Answer 1 · 2019-12-29 21:53:33

Шохрух Шаймардонов @joeberetta Куратор тега JavaScript

Читай: https://epdf.pub/google-for-dummies.html

Не нужен jq для записи в локалстор
localStorage.setItem('keyName', 'keyValue')

Ответ написан более трёх лет назад

4 комментария

Answer 2 · 2020-12-30 15:51:01

$(document)
.on('click', '.tdItem', function(e){
    localStorage.setItem('tdItemStyle', $(this).attr('style'));
})
.ready(function(){
            $('.tdItem').attr('style',localStorage.getItem('tdItemStyle');
        })

Как сохранить атрибуты html элементов в localStorage?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт