将对象保存在localStorage中，该对象具有一种方法 [英] Saving objects in localStorage which has a method

问题描述

问题是我正在保存使用项目工厂功能创建的项目.这些项目还具有addToDo方法，我正在将该项目保存到myProjects数组中.

The problem is that I am saving projects, which are made with project factory function. The projects also have addToDo method and I am saving this projects into myProjects array.

我很努力，当我的项目保存到本地存储或从本地存储检索时，它们失去了功能(addToDo方法).在页面刷新后，我无法再将待办事项添加到项目中了.所以我想项目工厂的方法没有保存到localStorage中.谢谢.

I am struggling with, that when my projects are saved or retrieved to/from localStorage, they loose functionality (addToDo method). As after page refresh I can't add todos to the projects anymore. So I guess that method of project factory isn't saved to localStorage. Thanks.

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);
  
};

推荐答案

这样的模式可能会有用.您可以将它们保留在单个对象中，也可以创建两个函数，例如 newProjectFactory 和 newProjectFromJSON .

A pattern like this might be useful. You can keep them in an single object or create two functions such as newProjectFactory and 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 则用于封送数据.

The factory method is exactly what you have now, it simply creates a new project given your factory inputs. The from method is a little closer to the metal where it allows you inject specific state properties. The factory simply creates a more ergonomic api for creating projects while the from is used to marshal data.

您可能要考虑的另一件事是在工厂对象上添加 toJSON 方法.这将允许您将私有字段也添加到json，而在使用常规显示模式时，私有字段可能不会序列化.一个很好的用例可能是 toDos 数组.您可能不希望公开，但希望在json中使用.

Another thing you might want to consider is adding a toJSON method on the factory object. This will allow you to add private fields to json as well that may not be serialized while using the normal revealing pattern. A good use case is probably the toDos array. You probably don't want that public but want it in 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));

这篇关于将对象保存在localStorage中，该对象具有一种方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！