Как сделать, чтобы добавленные данные не пропадали при обновлении страницы?

Question

[Наталия]

Делаю вот это: https://jsfiddle.net/nlynx/74eo9a2g/3/

Тут можно перетаскивать задачи в разные блоки и добавлять новые задачи.
Необходимо, чтобы при обновлении страницы текущее рабочее состояние оставалось неизменным, а не сбрасывалось на дефолтное.

Answer 1

[Алексей Ярков]

localStorage.setItem('items', JSON.stringify(this.items)); // записать
this.items = JSON.parse(localStorage.getItem('items')) || []; // получить

Answer 2

[0xD34F]

Выкидываем jquery / jquery-ui, вместо них используем что-то более уместное - например, Vue.Draggable. Следим за изменениями списков с помощью watch, в обработчике пишем значение в localStorage. При загрузке, соответственно - достаём (если есть). Как-то так:

data: () => ({
  newTask: '',
  items: {},
}),
watch: {
  items: {
    deep: true,
    handler: val => localStorage.setItem('items', JSON.stringify(val)),
  },
},
methods: {
  addTask() {
    const title = this.newTask.trim();
    if (title) {
      const id = 1 + Math.max(0, ...Object.values(this.items).flat().map(n => n.id));
      this.items.A.push({ id, title });               
    } else {
      alert('Введите текст задачи');
    }
    this.newTask = '';
  },
},
created() {
  let items = null;
  try {
    items = JSON.parse(localStorage.getItem('items'));
  } catch (e) {}
  this.items = items || дефолтное значение;
},

<div>
  <input placeholder="текст задачи" v-model="newTask">
  <button @click="addTask">+</button>
</div>
<draggable
  v-for="(v, k) in items"
  v-model="items[k]"
  :key="k"
  :options="{ group: 'tasks' }"
  element="ul"
  class="connectedSortable"
>
  <li v-for="item in v" :key="item.id">{{ item.title }}</li>
</draggable>