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

Простой
Ошибка three на редми ноте 7 как решить?
- 1 подписчик
- 2 часа назад
- 46 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Какой тип данных у RegExp, TypedArray и других?
- 1 подписчик
- 5 часов назад
- 101 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 7 часов назад
- 53 просмотра
0

ответов
JavaScript

+3 ещё

Средний
Google блокирует запрос на вход,что делать?
- 2 подписчика
- 9 часов назад
- 180 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- 15 часов назад
- 57 просмотров
0

ответов
JavaScript

Простой
На каком JS фреймворке сделан фронт wildberries.ru?
- 1 подписчик
- 21 час назад
- 230 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Делаю кастомный калькулятор на Tilda, как по клику на картинку выбрать нужную галочку?
- 1 подписчик
- 22 часа назад
- 45 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- вчера
- 65 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 22 дек.
- 117 просмотров
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- 21 дек.
- 97 просмотров
2

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

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

До 220 000 ₽

Разработать дизайн для маркетплейса

24 дек. 2024, в 16:09

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

Помочь с регистрацией на linkedin

24 дек. 2024, в 15:54

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

Верстка респонзивной заглушки

24 дек. 2024, в 15:42

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

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?

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

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

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