多项目本地存储javascript

多项目本地存储javascript,javascript,local-storage,Javascript,Local Storage,我的页面上有两个不同的列表,我想将这些数据存储在本地存储器中。使用下面的代码,我存储了一个列表中的数据。 如何使用此代码将两个列表中的数据存储在单独的对象中? 也许这个问题很傻,但我是个初学者。谢谢你的帮助 类存储{ 存储(任务){ const tasks=this.getFromStorage(); 任务。推送(任务); setItem('tasks',JSON.stringify(tasks)); } 再投资(任务){ const tasks=this.getFromStorage();

我的页面上有两个不同的列表,我想将这些数据存储在本地存储器中。使用下面的代码,我存储了一个列表中的数据。 如何使用此代码将两个列表中的数据存储在单独的对象中? 也许这个问题很傻,但我是个初学者。谢谢你的帮助

类存储{
存储(任务){
const tasks=this.getFromStorage();
任务。推送(任务);
setItem('tasks',JSON.stringify(tasks));
}
再投资(任务){
const tasks=this.getFromStorage();
配方。forEach((任务、索引)=>{
如果(任务===task.id){
任务.拼接(索引,1);
}
});
setItem('tasks',JSON.stringify(tasks));
}
getStorage(){
让任务;
if(localStorage.getItem('tasks')==null){
任务=[];
}否则{
tasks=JSON.parse(localStorage.getItem('tasks'));
}
返回任务;
}

}
将名称传递给构造函数,例如:

constructor(name) { this.name = name; }
然后将
任务
替换为
此名称
无处不在,例如:

localStorage.getItem(this.name)
然后你可以做:

const tasks = new Storage("tasks");
const users = new Storage("users");

如果我理解你的问题是正确的,你需要调整你的函数结构,以接受一个定义你想要编辑的列表的参数

然后,您的存储应该包含
对象的
数组
,每个对象都需要有一个标识符,例如可以用来标识不同列表的名称或ID

然后需要将它们传递给函数进行修改和检索。传入准确的ID或名称,然后函数代码应该在数组中查找正确的对象。可以很容易地使用
array.find
,例如
someArray.find(x=>x.name==“List1”)


希望能有所帮助。

试试这种更通用、更可重用的方法

类存储{
静态存储(obj,键){
const store=Storage.getFromStorage(key);
存储推送(obj);
setItem(key,JSON.stringify(store));
}
静态删除存储(对象、键、比较){
const store=Storage.getFromStorage(key);
store.forEach((项目,索引)=>{
if(fnCompare&&fnCompare(obj,项目)){
存储拼接(索引,1);
}否则如果(项目==obj){
存储拼接(索引,1);
}
});
存储.saveStorate(存储,密钥);
}
静态getFromStorage(键){
if(localStorage.getItem(key)==null){
返回[];
}否则{
返回JSON.parse(localStorage.getItem(key));
}
}

}
我会使用更通用的方法。由于“任务”是硬编码的,因此很难重用。此外,这是为了使所有存储的数据都必须是一个数组或数组中的项而构建的—我会将其更改为处理所有类型。如果您想向阵列中注入一些内容,我认为您可以而且应该在存储类之外执行该操作,然后再次保存。此外,当拉出复杂对象时,需要“恢复”

另一件需要注意的事情是,您可能会遇到“JSON图形问题”,因为JSON不存储对象引用数据。小心使用这个。这里有更多关于这方面的信息:

请参阅下面的示例代码,下面是一个正在运行的JSFIDLE来演示:

类存储{
静态get(键,REVIVEEFUNCORDEFULT=null){
const itemJSON=localStorage.getItem(键)
if(REVIVEEFUNCORDEFULT!==null){
if(itemJSON==null)
返回未排序故障
else if(REVIVEEFUNCORDEFULT的类型==='function')
返回REVEVEFUNCORDEFAULT(JSON.parse(itemJSON))
}
返回JSON.parse(itemJSON)
}
静态设置(键、项){
setItem(key,JSON.stringify(item))
}
静态未设置(键){
localStorage.removeItem(键)
}
}
//普通物体
set('obj',{foo:'bar'})//set对象
console.log(Storage.get('obj',{}))//对象存在
console.log(Storage.get('obj2',{}))//对象回退值
//原始类型
Storage.set('bool',true)//set数组
console.log(Storage.get('bool',false))//数组存在
console.log(Storage.get('bool2',false))//数组回退值
//排列
set('arr',[1,2,3])//set数组
console.log(Storage.get('arr',[])//数组存在
console.log(Storage.get('arr2',[])//数组回退值
//变异数组
const arr=Storage.get('arr',[])
arr.push(4)
Storage.set('arr',arr)
console.log(Storage.get('arr',[]))
//非普通JS对象
班主任{
构造函数(名字,姓氏){
this.firstName=firstName
this.lastName=lastName
}
getFullName(){
返回this.firstName+''+this.lastName
}
}
Storage.set('person',newperson('Bob','Ross'))//set对象
const person=Storage.get('person',
({firstName,lastName})=>新人(firstName,lastName)
)
console.log(person.getFullName())