Блог

Главная - Вопросы по программированию - Сохранение объектов в localStorage, у которого есть метод

Сохранение объектов в localStorage, у которого есть метод

#javascript #object #local-storage

#javascript #объект #локальное хранилище

Вопрос:

Проблема в том, что я сохраняю проекты, созданные с помощью функции project factory. В проектах также есть метод addTodo, и я сохраняю эти проекты в массив myProjects.

Я борюсь с тем, что, когда мои проекты сохраняются или извлекаются в / из localStorage, они теряют функциональность (метод addTodo). Поскольку после обновления страницы я больше не могу добавлять задачи в проекты. Поэтому я предполагаю, что метод project factory не сохраняется в localStorage. Спасибо.

 let newProject;
let myProjects = localStorage.getItem("projects")
  ? JSON.parse(localStorage.getItem("projects"))
  : [
    
  ];

const saveToLocalStorage = () => {
  localStorage.setItem("projects", JSON.stringify(myProjects));
};

// Project factory, which takes in title and makes toDo array, to which the toDos will be added...
const newProjectFactory = (id, title) => {
  const toDos = [];

  const add_toDo = (toDo) => {
    toDos.push(toDo);
  };

  return { id, title, toDos, add_toDo };
};

const newProjectEvent = (event) => {
  // DOM elements of form ...
  event.preventDefault();
  const newProjectTitle = document.getElementById("newProjectName").value;

  let ID;
  if (myProjects.length > 0) {
    ID = myProjects[myProjects.length - 1].id   1;
  } else {
    ID = 0;
  }

  newProject = newProjectFactory(ID, newProjectTitle);

  myProjects.push(newProject);
  
};

Комментарии:

1. Вы можете сохранять только строки в локальном хранилище и JSON.stringify() игнорирует функциональные значения свойств объекта.

2. Добавьте конструктор к вашему объекту, который принимает данные и устанавливает свои свойства с этими данными. Используйте этот конструктор для создания экземпляров объектов с данными из localStorage.

3. Сохранение функций для последующего использования позволит мне просто переопределить это пространство и обновить функцию со злым умыслом. К счастью, браузеры будут кэшировать сам js-файл, поэтому позже не будет сетевых запросов, поэтому сохранение его в js-файле должно быть в порядке. Источник: я взломал некоторые системы с помощью людей, пытающихся вычислять строки функций. полезная нагрузка будет меньше, если вы сохраните данные и передадите их в конструктор javascript.

4. Итак, в основном я должен извлекать данные из localStorage и помещать их в projectFactory, а элементы todo в toDoFactory?

Ответ №1:

Подобный шаблон может быть полезен. Вы можете сохранить их в одном объекте или создать две функции, такие как newProjectFactory и newProjectFromJSON .

 const Project = {
  factory: (id, title) => {
    return Project.from({ id, title });
  },
  from: (state) => {
    const { toDos = [], id, title } = state || {};

    const add_toDo = (toDo) => {
      toDos.push(toDo);
    };

    return { id, title, toDos, add_toDo };
  }
};

const project = Project.factory(1, 'title');
project.add_toDo('taco');

const json = JSON.stringify(project);
const deserialized = Project.from(JSON.parse(json));
console.log(deserialized);

factory Метод — это именно то, что у вас есть сейчас, он просто создает новый проект с учетом ваших заводских входных данных. from Метод немного ближе к металлу, где он позволяет вводить определенные свойства состояния. factory Просто создает более эргономичный api для создания проектов, в то время from как используется для маршалирования данных.

Еще одна вещь, которую вы, возможно, захотите рассмотреть, — это добавление toJSON метода к объекту factory. Это позволит вам также добавлять в json закрытые поля, которые могут не сериализоваться при использовании обычного шаблона раскрытия. Хорошим вариантом использования, вероятно toDos , является массив. Вы, вероятно, не хотите, чтобы это было общедоступно, но хотите, чтобы это было в json.

 const newProjectfactory = () => {
  const toDos = [];
  
  const toJSON = () => {
    return { toDos };
  };
  
  const addTodo = (todo) => {
    toDos.push(todo);
  };
  
  return {
    addTodo,
    toJSON
  };
}

const project = newProjectfactory();
console.log(JSON.stringify(project));