基于值的localStorage.removeItem

时间:2018-09-07 19:43:07

标签: javascript json vue.js local-storage

我正在尝试将帐户删除添加到我的应用程序中。我使用一个基于API的具有多个值的键存储帐户。

这是我添加帐户的方式:

addAccount(state,account){
    state.accounts[account.apikey] = account;
    localStorage.setItem(
        "accounts",
        JSON.stringify(state.accounts)
    );  
},

这是我的localStorage的样子:

key: accounts
{  
   "API Key 1":{ a bunch of info },
   "Api Key 2":{ a bunch of info }
}

我尝试根据API密钥删除帐户:

removeAccount(state,account){
    localStorage.removeItem(account.apikey);
    localStorage.removeItem(JSON.stringify(state.accounts));
    localStorage.removeItem(state);
    localStorage.removeItem(account);
    localStorage.removeItem(state.accounts[account.apikey]);
}

这两种方法均未删除值。知道我可能会缺少什么吗?

2 个答案:

答案 0 :(得分:2)

localStorage中的数据保留为字符串。因此,您需要阅读整个字符串,删除项目,然后将其写回:

let oldLocalStorage = JSON.parse(localStorage['accounts']);
// Do something to oldLocalStorage, which is the JS object

// Write back to local storage
localStorage.setItem(
        "accounts",
        JSON.stringify(oldLocalStorage)
);  

答案 1 :(得分:2)

您只能使用localStorage.removeItem()删除整个localStorage条目。您要尝试的是删除localStorage条目的 part 。唯一的方法是检索对象,像普通的JS对象一样删除键,然后重新设置localStorage条目:

removeAccount(state, account){
  const accounts = JSON.parse(localStorage.getItem('accounts'));
  delete accounts[account.apikey];
  localStorage.setItem("accounts", JSON.stringify(accounts));
}