如何修复我的书签本地存储服务

Question

我的书签服务以JSON结构存储结果项，效果不佳。 问题可能来自与本地存储功能不起作用的阵列。

我试图将我的项目字符串化为JSON。

    var key = 'fud_bookmarks';
    var bookmarks = [];
    this.addBookmark = function(resultItem) {
      var bookmarks = this.getBookmarks();
      bookmarks.push(resultItem);
      return setBookmarks(bookmarks);
    };
    this.deleteBookmark = function(resultItem) {
      var bookmarks = this.getBookmarks();
      var i = bookmarks.indexOf(resultItem);
      if (i >= 0) {
        bookmarks.splice(i, 1);
        console.log(bookmarks)
        return setBookmarks(bookmarks);
      }
      return false;
    };
    this.getBookmarkCount = function() {
      return getBookmarks().length;
    };
    this.getBookmarks = function() {
      var bookmarks = localStorage.getItem(key);
      if (!bookmarks) {
        bookmarks = [];
      }
      return bookmarks;
    }

    function setBookmarks(bookmarks) {
      return localStorage.setItem(key, bookmarks);
    }

生成的项如下所示。

    {
      id: "112",
      docType: "doctyp117",
      title: "Abschließender Bericht über die Arbeit des Kunsts…- September 1944, Exemplar für Tieschowitz, o.D.",
      type: "Archivbestand",
      description: null,
      …
    }
    $$hashKey: "object:455"
    archive: {
      id: "24",
      title: "Familienarchiv der Grafen Wolff Metternich zur Gracht"
    }

现在我在控制台中收到此错误 =>

bookmarks.push is not a function
    at Object.addBookmark (bookmark.js:12)

Answer 1

localStorage存储的是字符串值，而不是对象。 如果你想存储一个数组应该把它串起来。

function setBookmarks(bookmarks) {
   return localStorage.setItem(key, JSON.stringify(bookmarks));
}

this.getBookmarks = function () {
  var bookmarks = JSON.parse(localStorage.getItem(key));
...

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

如果 starage 中的值不是有效的 JSON JSON.parse方法会抛出错误，因此您可以使用 try catch 来避免错误：

this.getBookmarks = function () {
  var bookmarks;
  try {
    bookmarks = JSON.parse(localStorage.getItem(key));
  } catch (e) {
    bookmarks = [];
  }
...

删除书签应如下所示：

this.deleteBookmark = function (resultItem) {
  var i = 0;
  let bookmarks = this.getBookmarks();
​
  for (;i < bookmarks.length - 1;i++) {
    if (resultItem.id === bookmarks[i].id) {
      break;
    }
  }
 if (i >= 0) {
   bookmarks.splice(i, 1);
   console.log(bookmarks)
   return setBookmarks(bookmarks);
 }
 return false;
}

Answer 2

试试这个：检查书签类型是否不是对象，然后返回空数组。因为数组也是javascript中一种特殊类型的对象。

this.getBookmarks = function() {
      var bookmarks = localStorage.getItem(key);
      if (typeof bookmarks !== "object") {
        bookmarks = [];
      };
    return bookmarks;
    };