Tips for repairing my Bookmark local-storage tool

Question

Tips for repairing my Bookmark local-storage tool

My Bookmark Service, which stores result items with a JSON structure, is experiencing issues. It seems that the problem lies in the array not functioning properly with the local storage feature.

I have attempted to use JSON.stringify on my items.


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

The resulting items are structured as follows.


    {
      id: "112",
      docType: "doctyp117",
      title: "Abschließender Bericht über die Arbeit des Kunsts…- September 1944, Exemplar für Tieschowitz, o.D.",
      type: "Archivbestand",
      description: null,
      …
    }

    $$hashKey: "object:455"

    archive: {
      id: "24",
      title: "Familienarchiv der Grafen Wolff Metternich zur Gracht"
    }

Currently, I am encountering the following error in the console =>

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

javascript angularjs

Answer 1

Answer №1

Remember, localStorage can only store string values, not objects. Make sure to stringify an Array before storing it.

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

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

Visit the documentation for Window.localStorage on MDN

If the value in storage is not a valid JSON, using JSON.parse will throw an error. To handle this, consider using try-catch blocks:

this.retrieveBookmarks = function () {
  var bookmarks;

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

For deleting a bookmark, the method should look something like this:

this.deleteBookmark = function (bookmarkItem) {
  var index = 0;

  let bookmarks = this.retrieveBookmarks();

  for (;index < bookmarks.length - 1; index++) {
    if (bookmarkItem.id === bookmarks[index].id) {
      break;
    }
  }

 if (index >= 0) {
   bookmarks.splice(index, 1);
   console.log(bookmarks)
   return saveBookmarks(bookmarks);
 }
 return false;
}

Answer 2

Remember, localStorage can only store string values, not objects. Make sure to stringify an Array before storing it.

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

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

Visit the documentation for Window.localStorage on MDN

If the value in storage is not a valid JSON, using JSON.parse will throw an error. To handle this, consider using try-catch blocks:

this.retrieveBookmarks = function () {
  var bookmarks;

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

For deleting a bookmark, the method should look something like this:

this.deleteBookmark = function (bookmarkItem) {
  var index = 0;

  let bookmarks = this.retrieveBookmarks();

  for (;index < bookmarks.length - 1; index++) {
    if (bookmarkItem.id === bookmarks[index].id) {
      break;
    }
  }

 if (index >= 0) {
   bookmarks.splice(index, 1);
   console.log(bookmarks)
   return saveBookmarks(bookmarks);
 }
 return false;
}

Answer 3

Answer №2

Here's a suggestion: Make sure to verify whether bookmarks is not an object before returning an empty array. Remember that in JavaScript, an Array is also considered a type of object.

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

    return bookmarks;
    };

Answer 4

Here's a suggestion: Make sure to verify whether bookmarks is not an object before returning an empty array. Remember that in JavaScript, an Array is also considered a type of object.

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

    return bookmarks;
    };

Tips for repairing my Bookmark local-storage tool

Answer №1

Answer №2

Similar questions

What is the reason I do not need to decode or parse a JSON string created by PHP in JavaScript?

Utilizing the jQuery slideToggle method on the specified target element

Choose a numeric value and then adjust it to display with exactly two decimal places

Performing an asynchronous AJAX request to a PHP script to compute the total sum and retrieve

Incorporate External Web Page Information by Clicking a Button

Once logged out in Vue Router, the main app template will briefly display along with the login component

A guide on consolidating all app.use statements into a single shared file

Use JavaScript's Array.filter method to efficiently filter out duplicates without causing any UI slowdown

Button element experiencing unexpected issues with ng-disabled in AngularJS

Insert data into a drop-down menu and organize it

I'm trying to figure out how to resolve this issue in IE: SCRIPT1003: A colon is expected

What could be causing the issue of messages not displaying while incorporating connect-flash with res.locals in express.js and ejs templating?

How can I merge two arrays in JavaScript to form a table?

Making a RESTful API call using JavaScript

Why does the Node.js REST API keep throwing errors after I try to create just one record?

Enhance your message inbox experience with jQuery/Javascript features inspired by Gmail, including the ability to select all messages with a checkbox and

Tips for displaying an alpha-numeric keyboard in a React Native application

PHP script not being triggered by Ajax upload

html inserting line break using label

Optimizing CSS With jQuery During Browser Resize