Lockal Storage и Chrom
Здравствуйте!
Такой вопрос, сохранение работает в Мозиле, но не работает в Chrom и в Opere, почему? что может быть не так? Cпасибо
<table>
<tr><th scope="col">Nazwę</th>
<th scope="col" >Opis</th>
<th scope="col"> </th>
</tr>
<tr>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
</div>
<div class="item_box">
</tr>
<tr>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
</div>
<div class="item_box">
</tr>
<tr>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
</div>
<div class="item_box">
</tr>
<tr><td>
<label>
<input type="text" name="text" ">
</label>
</td>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
</div>
<div class="item_box">
</tr>
<tr>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
</div>
<div class="item_box">
</tr>
<tr> <td>
<label>
<input type="text" name="text" ">
</label>
</td>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
</div>
<div class="item_box">
</tr>
<tr>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
</div>
<div class="item_box">
</tr>
<tr><td>
<label>
<input type="text" name="text" ">
</label>
</td>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
</div>
<div class="item_box">
</tr>
<tr>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
<td>
<label>
<input type="text" name="text" ">
</label>
</td>
</div>
<div class="item_box">
</tr>
<div id="cart_content"></div>
</div>
</table>
</body>
let div = document.getElementById('div');
div.addEventListener('click', changeValue);
div.addEventListener('blur', changeEnd);
function changeValue(event){
let target = event.target;
target.setAttribute('contenteditable', true);
}
function changeEnd(){
div.removeAttribute('contenteditable');
console.log(div.innerText)
}
// Получаем данные из LocalStorage
function getCartData(){
return JSON.parse(localStorage.getItem('cart'));
}
// Записываем данные в LocalStorage
function setCartData(o){
localStorage.setItem('cart', JSON.stringify(o));
return false;
</script>
|
Цитата:
|
с разрешения, покажу свою логику поиска проблемы:
1. понял я, как посмотреть в браузерах хранилище и ключи, код упростил до только сохранить и вернуть
localStorage.setItem('div',changeValue);
localStorage.getItem('div ');
Но вопрос вот происходит у меня событие ( смысл всего, в ячейки таблицы писать текст и чтобы не пропадал). Значения события у меня - changeValue, но почему не сохраняет значение - я уже перепробовал вообще все названия блоков от input до просто table По моему мнению - раз все события происходят в главном блоке с id номером - div (уже думал путаница из-за имени, тоже менял) - там по клику мышки активируется возможность интерактивной ячейки и происходит событие, то чтобы текущую надпись запомнить - localStorage.setItem('div',changeValue); но это все снова работает только в Мозиле, или так вообще нельзя делать? ps я пока сам не понимаю, каким местом, читаю инструкцию - записать, показать вижу, а - что сохраняем, и значение его - а толку - видите |
Konstantin47,
структуру таблицы неплохо бы исправить, выкинуть все div или переместить их в ячейки td. |
|
Рони, спасибо большое!
|
<body>
<table id='div'>
<tr>
<th scope="col">Nazwę</th>
<th scope="col" >Opis</th>
<th scope="col"> </th>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
</table>
почти по примеру сделал таблицу хорошо, а в таком случае - key для сохранения - ячейка или td будет? мне, чтоб хоть одно точное значение знать с моим старым кодом, точно также не работает |
Konstantin47,
не понимаю что вы пишите, ни код, ни описание, могу только гадать, что вы хотите сделать. |
щас
<body>
<table id='div'>
<tr>
<th scope="col">Nazwę</th>
<th scope="col" >Opis</th>
<th scope="col"> </th>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
</table>
</body>
let div = document.getElementById('div');
div.addEventListener('click', changeValue);
div.addEventListener('blur', changeEnd);
console.log(div);
function changeValue(event){
let target = event.target;
target.setAttribute('contenteditable', true);
}
function changeEnd(){
div.removeAttribute('contenteditable');
console.log(div.innerText)
}
localStorage.setItem('div',changeValue);
localStorage.getItem('div');
Если запустить будет, похоже, как у вас - таблица с активными ячейками Cейчас хочу только, чтоб сохраняло данные LokalStorage в ячейках (все, что показывал выше работало только в Мазиле) |
Вы чего сохранить то пытаетесь?
localStorage.setItem('div',changeValue); - это вы саму функцию туда пытаетесь засунуть. Она конечно как то в строку преобразуется вот в таком виде "function changeValue(event){ let target = event.target; target.setAttribute('contenteditable', true); }" Но это явно не то, что вам надо. |
если честно, сохранить, то что будет введено в ячейку
|
localStorage.setItem('div', '1234567');
alert (localStorage.getItem('div'));
Прекрасно работает и в Хроме и в Файрфоксе. |
сохранение и редактирование содержимого ячеек таблицы js
Konstantin47,
двойной клик по ячейке, вход/выход из режима редактирования. начальные данные указать в массиве arr и придумать любое новое имя. пример tableEditor(tbody, arr, 'test') строка 67
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<table id="table">
<thead>
<tr>
<th scope="col">Nazwę</th>
<th scope="col" >Opis</th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
const tableEditor = (tbody, arr = [], localName = "tds") => {
if (localStorage[localName]) arr = JSON.parse(localStorage.getItem(localName));
let container = document.createDocumentFragment();
arr.forEach((ar, j) => {
let tr = document.createElement("tr");
for (let txt of ar) {
let td = document.createElement("td");
td.innerHTML = txt;
td.dataset.j = j;
tr.append(td)
}
container.append(tr)
});
tbody.append(container);
let input = document.createElement("input");
tbody.addEventListener("dblclick", ({
target
}) => {
if (input.parentNode) {
let td = input.parentNode;
let i = td.cellIndex;
let j = td.dataset.j;
input.remove();
td.textContent = arr[j][i] = input.value;
localStorage.setItem(localName, JSON.stringify(arr));
}
if (target.tagName == "TD") {
input.value = target.textContent;
target.textContent = "";
target.append(input)
}
}, true);
}
let arr = [
[1234, 1234],
[1234, 1234]
];
let tbody = document.querySelector("#table tbody");
tableEditor(tbody, arr, "tdd")
</script>
</body>
</html>
|
Как то так попробуйте
<body>
<table id='div'>
<tr>
<th scope="col">Nazwę</th>
<th scope="col" >Opis</th>
<th scope="col"> </th>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
</table>
<script>
let div = document.getElementById('div');
div.addEventListener('click', changeValue);
div.addEventListener('focusout', changeEnd);
function changeValue(event){
event.target.setAttribute('contenteditable', true);
}
function changeEnd(event){
event.target.removeAttribute('contenteditable');
console.log(event.target.innerText)
setValues ()
}
function setValues () {
const tbd = document.getElementById('div').tBodies[0];
const rws = tbd.rows;
const v = [];
for (let i=0; i<rws.length; i++) {
const cls= rws[i].cells;
const cv = []
for (let j=0; j<cls.length; j++) {
cv.push(cls[j].textContent);
}
v.push(cv);
}
localStorage.setItem('tblvalues',JSON.stringify(v));
console.log(localStorage.getItem('tblvalues'))
}
function restoreValues () {
const tbd = document.getElementById('div').tBodies[0];
const rws = tbd.rows;
let tbv = localStorage.getItem('tblvalues')
if (!tbv) return
const v = JSON.parse(tbv);
for (let i=0; i<rws.length; i++) {
const cls= rws[i].cells;
for (let j=0; j<cls.length; j++) {
cls[j].textContent = v[i][j];
}
}
}
restoreValues ()
</script>
</body>
|
Цитата:
Я, если честно, не понимал до таких примеров, откуда вообще брать условия и циклы для сохранения. сам абзац про JS LokalStorage c очень разных источников пересмотрел и только сами функции понял 9 сохранить, достать, удалить), а циклы... Может подскажите - какой-то ресурс, с задачами и примерами решений? жизненными, вот, как активация форм input html, проверка паролей ,что именно в задачах с сайтами используется ps то что связано с математикой и console.Log - я могу и степени и корни и всякие формулы посчитать, а такие же задачи, они совсем другие и я просто не понимаю, с какой стороны подходить. Спасибо огромное за помощь! |
| Часовой пояс GMT +3, время: 01:58. |