Приложение CRUD с javascript
CRUD с js и локальным хранилищем
так что давайте начнем со страницы index.html
‹! DOCTYPE html›
‹Html›
‹Head› ‹/head›
‹Form id =” myForm ”›
‹Input type =” text ”id =” text ”›
‹Button› Отправить ‹/button›
‹Div id =” main ”› ‹/div›
‹Скрипт src =” crud.js ”› ‹/script›
‹/Html›
теперь давайте создадим файл crud .js
сначала создайте массив для хранения данных, например
пусть комментарии = [];
для создания данных и их сохранения в локальном хранилище, пожалуйста, найдите приведенный ниже код
document.querySelector (‘# myForm’). addEventListener (‘submit’, function (e) {
e.preventDefault ()
comments.push ({
id: Math.random (),
сообщение: e.target.elements.text.value
})
localStorage.setItem ("Mesaages", JSON.stringify (комментарии))
})
Давайте теперь прочитаем данные, для этого мы создадим такую функцию
let data = function (m) {
document.querySelector (‘# main’). innerHTML = ’’
comments.forEach (function (f) {
const msg = document.createElement (‘p’)
const button = document.createElement («кнопка»)
msg.textContent = f.message
document.querySelector (‘# main’). append (msg)
})
};
пожалуйста, вызовите данные (комментарии) в функции создания, чтобы отобразить данные
в верхней части этого файла crud.js любезно добавьте следующую строку кода, чтобы получить данные из локального хранилища.
const msgs = localStorage.getItem ("Mesaages")
пусть комментарии = [];
if (msgs) {
комментарии = JSON.parse (сообщения);
}
Это все для создания и чтения данных
Теперь давайте удалим данные по идентификатору.
для этого нам нужно создать функцию
let del = function (id) {
const d = comments.findIndex (function (com) {
вернуть com.id === id
})
if(d>-1){
комментарии.splice (d, 1)
}
}
давайте поработаем над функцией данных, чтобы удалить данные
добавить строку ниже в функции данных
const button = document.createElement («кнопка»)
button.textContent = «Удалить»
msg.appendChild (кнопка)
button.addEventListener (‘click’, function () {
дель (f.id)
localStorage.setItem ("Mesaages", JSON.stringify (комментарии))
данные (комментарии)
})
это для удаления
теперь давайте создадим два файла edit.html и editData.html для редактирования данных
в файле crud.js добавьте следующую строку кода
const editButton = document.createElement (‘a’)
editButton.textContent = «Изменить»
editButton.setAttribute (‘href’, `/ edit.html # $ {f.id}`)
msg.appendChild (editButton)
Теперь поместим весь код для файла crud.js
const msgs = localStorage.getItem ("Mesaages")
пусть комментарии = [];
if (msgs) {
комментарии = JSON.parse (сообщения);
}
// Читать
let data = function (m) {
document.querySelector (‘# main’). innerHTML = ’’
comments.forEach (function (f) {
const msg = document.createElement (‘p’)
const button = document.createElement («кнопка»)
const editButton = document.createElement (‘a’)
button.textContent = «Удалить»
editButton.textContent = «Изменить»
msg.textContent = f.message
msg.appendChild (кнопка)
editButton.setAttribute (‘href’, `/ edit.html # $ {f.id}`)
msg.appendChild (editButton)
button.addEventListener (‘click’, function () {
дель (f.id)
localStorage.setItem («Mesaages», JSON.stringify (комментарии))
данные (комментарии)
})
document.querySelector (‘# main’). append (msg)
})
};
данные (комментарии);
// Создайте
document.querySelector (‘# myForm’). addEventListener (‘submit’, function (e) {
e.preventDefault ()
comments.push ({
id: Math.random (),
сообщение: e.target.elements.text.value
})
localStorage.setItem ("Mesaages", JSON.stringify (комментарии))
данные (комментарии)
})
// удалять
let del = function (id) {
const d = comments.findIndex (function (com) {
вернуть com.id === id
})
if(d>-1){
комментарии.splice (d, 1)
}
}
в файле edit.html добавьте приведенный ниже код
‹! DOCTYPE html›
‹Html›
‹P› Это страница редактирования ‹/p›
‹Div id =” main ”› ‹/div›
‹Input type =” text ”id =” edit ”›
‹Button id =” update ”› Обновить ‹/button›
‹Скрипт src =” crud.js ”› ‹/script›
‹Script src =” editData.js ”› ‹/script›
‹/Html›
и в файле editData.js добавьте приведенный ниже код
let msgData = document.querySelector (‘# edit’)
let updButton = document.querySelector (‘# update’)
document.querySelector (‘# main’). innerHTML = ’’
// чтобы получить точный идентификатор из url
const msdId = location.hash.substring (1)
console.log (msdId)
const m = JSON.parse (localStorage.getItem (‘Mesaages’))
const da = m.find (функция (данные) {
вернуть data.id === msdId
})
if (da === undefined) {
location.assign (‘/ index.html’)
}
msgData.value = da.message
msgData.addEventListener (‘input’, function (e) {
da.message = e.target.value
localStorage.setItem ("Mesaages", JSON.stringify (m))
})
updButton.addEventListener (‘click’, function (e) {
//del(da.id)
localStorage.setItem ("Mesaages", JSON.stringify (m))
location.assign (‘/ index.html’)
})
Вот и все
Убедитесь, что идентификатор данных, хранящихся в локальном хранилище, заключен в кавычки «», поскольку я использую функцию Math.random () для генерации идентификатора, поэтому его не будет в «»
вы можете использовать uuid для генерации идентификатора, для этого просто добавьте ниже url в index.html внутри тега body
<script src="https://unpkg.com/uuid@latest/dist/umd/uuidv4.min.js"></script>
и измените comments.push ({
id: Math.random (), в uuidv4 ()
сообщение: e.target.elements.text.value
})
в файле crud.js
