Discover the world of Google Chrome Apps with the power of chrome.storage.local

While building an application, I encountered a perplexing issue that I need help with:

The task involves reading a JSON file and storing its content in localStorage using chrome.storage.local in a Chrome app.

Here is a snippet from the JSON file:

{
  "schedule": {
    "id": "416a18d6-7e42-4f8a-ac24-e902abe76f39",
    "name": "blabla",
    "updatedOn": "2013-09-08T16:34:41.000Z",
    "etag": "esxrdctfvygbuhnij5464df7g8hu",
    "applications": [
      {
        "id": "app001",
        "type": "text/html",
        "src": "http://www.google.com"
      },
      {
        "id": "app002",
        "type": "text/html",
        "src": "http://www.stackoverflow.com"
      }
    ],
    "normalContent": [
      {
        "layout_id": "layout001",
        "layout_name": "layout1",
        "layout_dur": "indefinite",
        "regions": [
          {
            "region_id": "region001",
            "region_name": "regiao1",
            "left": "0",
            "top": "0",
            "width": "0.5",
            "height": "1",
            "minWidth": "0",
            "minHeight": "0",
            "scheduleItem": "container",
            "limitCycle": "1",
            "selector": "seq",
            "containerList": [
              {
                "cid": "app001",
                "dur": "25"
              },
              {
                "cid": "app002",
                "dur": "15"
              }
            ]
          },
          {
            "region_id": "region002",
            "region_name": "regiao2",
            "left": "0.5",
            "top": "0",
            "width": "0.5",
            "height": "1",
            "minWidth": "0",
            "minHeight": "0",
            "scheduleItem": "container",
            "limitCycle": "1",
            "selector": "seq",
            "containerList": [
              {
                "cid": "app002",
                "dur": "15"
              },
              {
                "cid": "app001",
                "dur": "15"
              }
            ]
          }
        ]
      }
    ]
  }
}

After saving the content to storage as an object using the code below:

chrome.storage.local.set({playerSchedule:this.schedule}, function(){
    console.log('saved!')       
});

When retrieving the stored content using:

chrome.storage.local.get(["playerSchedule", "playerScheduleType"], function (res) {
    self.currentSchedule = res.playerSchedule;
    self.scheduleType = res.playerScheduleType;
});

The retrieved content looks like this:

{
  "schedule": {
    "applications": [
      {
        "id": "app001",
        "type": "text/html",
        "src": "http://www.google.com"
      },
      {
        "id": "app002",
        "type": "text/html",
        "src": "http://www.stackoverflow.com"
      }
    ],
    "etag": "esxrdctfvygbuhnij5464df7g8hu",
    "id": "416a18d6-7e42-4f8a-ac24-e902abe76f39",
    "name": "blabla",
    "normalContent": [
      {
        "layout_dur": "indefinite",
        "layout_id": "layout001",
        "layout_name": "layout1",       
        "regions": [
          {
            ...
            "containerList": [
            ]
          },
          {
            ...
            "containerList": [
            ]
          }
        ]
      }
    ],
    "updatedOn": "2013-09-08T16:34:41.000Z"    
  }
}

Upon observation, the stored content seems to be unordered alphabetically, and the containerList appears empty. I managed to resolve this by converting the object to a string before storage. However, I am curious as to why the object read as an object doesn't match what was saved. Any insights on this matter would be greatly appreciated.

Thank you for your assistance.

Answer №1

It appears to be related to the issue documented at this link. The fix is currently being developed and will be implemented in Chrome 31.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I relocate an object to a different position within THREE.JS?

I'm trying to figure out how to move one object to the position of another object. I found some suggestions online to use the TWEEN library, but I'm having trouble integrating it into my code. Any help would be greatly appreciated :) <scrip ...

After the Parent Component has successfully mounted, the Child Component will render

I am currently working with a third party library that has a unique prop allowing the user to pass in a string which is used to retrieve a DOM element and return its bottom value. <Sticky bottomBoundary="#some-id"> <MyChildComponentMightBeANa ...

"Create a React button component that, when clicked, navig

I'm currently developing a web application using React and bootstrap. I'm facing difficulties in redirecting the page to another one when applying onClick to buttons. After adding a href, I'm unable to navigate to another page. Do you think ...

How is it possible for the igx-expansion-panel to close when there is a nested angular accordion present?

Currently, I am faced with the challenge of closing the igx-expansion-panel within my Angular project. While everything functions smoothly with a standard panel, things get a bit tricky when dealing with nested angular accordion structures using igx-accord ...

Making a RESTful API call using JavaScript

Can someone help me with making a call to a REST API using JavaScript, Ajax, or jQuery? curl -v -X PUT -H "Content-Type: application/json" -H "Accept: application/json" -X PUT --user user:password http://url -d "{\"name\": \"Marcus0.2\ ...

Utilize client-side script in nodejs to share module functionalities

I created a function within the user controller module to verify if a user is logged in on the site: exports.isLoggedIn = function(req, res, next) { if (req.user) { return true; } else { return false; } }; I'm unsure of h ...

Having trouble with the setHours function in React not behaving as anticipated?

I'm having trouble adjusting the time in my React application using the setHours method: function App() { let currHour = new Date().setHours(15); return ( <div> <h1>{currHour}</h1> </div> ); } Inst ...

The sendFile function fails to transmit any data

Currently working on integrating the mailChimp API into my project, but facing an issue with the resFile code that handles sending the success response. The current code snippet: async function run(){ try { const res = await mailch ...

Sending JSON data from SpringMVC to Java server

I am working with a javascript array that is structured like this: var citizens1 = [{"startLat":null,"startLng":null,"socialSecurityNumber":null}]; The array contains 500 records, and instead of sending each record individually to the server, I convert ...

javascript - Retrieving a JSON string

I am currently working on a stock website where I need to retrieve JSON information from either Google's API or Yahoo's API. To test this functionality, I have used a replacement function to log the data onto a text box for testing purposes. Howe ...

Error: The function Undefined is not recognized by express.io

Struggling to configure express.io with individual files for each route? Check out the examples provided. Currently, I have a typical Express setup that I want to transition to express.io: Project app.js routes servepage.js Views ...

The execution of jQuery encountered an issue as it threw an error: parsererror with the specific error being SyntaxError due to

I'm currently facing an issue with a contact form that connects to a PHP script through ajax. After processing the form, the ajax script should execute specific actions based on the response received from the json_encode() function in the PHP script. ...

Using JSON in combination with any client or server programming language allows for seamless

Is it possible to use any language as server and client sides if I choose JSON as the data exchange format? I am currently working on a web application using PHP and jQuery. My server delivers responses in JSON format, and now I want to develop an Android ...

Issue with ESlint global installation in macOS root terminal

Having trouble installing ESlint globally on my Mac running Mojave 10.14.6. Every time I try to run 'npm install -g eslint' I keep encountering this error: Your operating system has rejected the operation. npm ERR! It seems that you lack the nec ...

SQL Procedure for Inserting Dynamic Data into MSSQL

Can a stored procedure be created to accept two parameters (Table_Name, Rows) where the rows are in a standard format such as JSON? For example: INSERT("TABLENAME","{{id:1,Code:'AA'},{id:2,Code'BB'}}") Or can it be in any other format ...

In a jQuery conditional statement, selecting the second child of the li element for targeting

I'm encountering an issue where I can't target the second child of an li element and use it in a conditional statement. Are jQuery conditionals not compatible with li:nth-child(2)? if($(".steps ul li:first-child").attr('aria-selected') ...

Using JSON Object for Default Selection in an Angular Dropdown Menu

Here is some code I have that fills in a specific select item on a webpage: <select ng-model="activity.selectedParent" ng-options="parent as parent.title for parent in parents track by parent._id"></select><br> I'm curious if there ...

What's the best way to toggle the visibility of an input-group in Bootstrap?

Is there a way to properly hide and show a Bootstrap 5 input-group? You can see an example here: https://jsfiddle.net/o08r3p9u I'm facing an issue where once the input group is hidden, it doesn't show correctly when displayed again. How can I e ...

Can a ListItem attribute be generated?

In the realm of Material UI, you can find a detailed showcase of ListItem at http://www.material-ui.com/#/components/list The appearance of a nested ListItem is demonstrated below: <ListItem value={1} primaryText="Brendan Lim" leftAvatar={ ...

What is the best method for extracting span text using selenium?

<p id="line1" class=""><span class="bot">Do you have a short-term memory?</span><span id="snipTextIcon" class="yellow" style="opacity: 1;"></span></p> I want to extract this text: Do you have a short-term memory? This ...