Вход

Просмотр полной версии : Аналог jquery наличия cookies, создания cookies


12345678
20.06.2022, 11:36
Доброго времени суток.

var author = readCookie('commenter_author');
if(author) jQuery('input[name="author"]').val(author);
...
if(jQuery('input[name="author"]').length) createCookie('commenter_author', jQuery('input[name="author"]').val(), 365);

Идёт считывание - если есть куки, то вписываем его значение в input
И следующая команда - если в input что-то есть на момент срабатывания, то создаём куки с этим значением.

Как это будет на чистом JS?

рони
20.06.2022, 12:34
12345678,
:-?
<!DOCTYPE html>
<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", function() {
const input = document.querySelector("input[name='author']"),
author = localStorage.getItem("commenter_author");
if (author) input.value = author
input.addEventListener("input", function() {
localStorage.setItem("commenter_author", input.value)
})
});
</script>
</head>

<body>
<input type="text" name="author">
</body>

</html>

ksa
20.06.2022, 12:36
Как это будет на чистом JS?
Тут описываются функции для работы с куками...
https://ruseller.com/lessons.php?id=593

А с ДОМ-элементами можно работать через
https://developer.mozilla.org/ru/docs/Web/API/Document/querySelector
или
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

12345678
20.06.2022, 17:07
рони
К сожалению, я не смог разобрать что от чего в том коде. Там всё вперемешку, и там не куки фигурирует, это дополнительно меня дезориентирует.

Вообще вот так весь код выглядит:

<script>
function createCookie(name, value, days) {
if(days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while(c.charAt(0) == ' ') c = c.substring(1, c.length);
if(c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}



document.addEventListener("DOMContentLoaded", function() {
var author = readCookie('commenter_author');
var email = readCookie('commenter_email');
if(author) jQuery('input[name="author"]').val(author);
if(email) jQuery('input[name="email"]').val(email);
document.getElementById('commentform').addEventLis tener('submit', function(){
if(jQuery('input[name="author"]').length) createCookie('commenter_author', jQuery('input[name="author"]').val(), 365);
if(jQuery('input[name="email"]').length) createCookie('commenter_email', jQuery('input[name="email"]').val(), 365);
});

})
</script>

<form action="h" method="post" id="commentform" class="comment-form">
<p class="comment-notes"><span id="email-notes">Ваш e-mail не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p>
<p class="comment-form-author">
<label for="author">Имя <span class="required">*</span></label>
<input id="author" name="author" type="text" value="" size="30" maxlength="245" required="required">
</p>
<p class="comment-form-email">
<label for="email">E-mail <span class="required">*</span></label>
<input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required">
</p>
<p class="comment-form-comment">
<label for="comment">Комментарий</label>
<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea>
</p>
<p class="form-submit">
<input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий">
</p>
</form>