Как сохранить атрибуты 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; 
}

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

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

Подписаться 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 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 54 минуты назад
- 23 просмотра
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- час назад
- 17 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 3 часа назад
- 21 просмотр
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 137 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 160 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 82 просмотра
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 51 просмотр
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработка сайта под ключ на CMS Bitrix или Wordpress по готову дизайн

22 нояб. 2024, в 14:05

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

Написание статей в нужном стиле ( интерьер, дизайн спальни )

22 нояб. 2024, в 13:52

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

Необходимо доработать расширение для Google Chrome

22 нояб. 2024, в 13:51

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

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?

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

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

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