There seems to be an issue with the functionality of chrome.storage.local.set()

Struggling with Chrome storage handling, I have reviewed the newest documentation for Chrome storage and implemented the following code snippet (found within an AJAX call success function, where info.userName is a value fetched from my backend program):

chrome.storage.local.set({ "userName": info.userName }, () => {
    chrome.storage.local.get("userName", function(data) {
        console.log(data.userName)
    });
});

However, the console.log() consistently returns undefined, despite my belief that info.userName holds a value. I also attempted this alternative approach, which proved to be ineffective:

chrome.storage.local.set({ "userName": info.userName });
chrome.storage.local.get("userName", function(data) {
    console.log(data.userName)
});

The issue appears to be with the set function failing to store anything locally. Any insights on resolving this?


Finally resolved the issue - the culprit was that the value of info.userName was not compatible with JSON. After rectifying this, the initial code snippet now functions correctly. Appreciate the feedback provided below!

Answer №1

Here are the steps to accomplish this task...

  • To add an item to Local Storage: localStorage.setItem("message", "Hi, I am Local Storage...");

  • To retrieve the value of an item from Local Storage: localStorage.getItem("message");

  • To remove an item from Local Storage: localStorage.removeItem("message");

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 retrieve the name of an HTTP status code using JavaScript and AngularJS?

My web application is built using AngularJS, JS, JQ, HTML5, and CSS3. It interacts with our projects' REST API by sending various HTTP methods and manipulating the data received. The functionality is similar to what can be achieved with DHC by Restlet ...

What steps can be taken to prevent a child component from re-rendering when the parent updates the context or state in React JS?

How can I prevent a child component from re-rendering when the parent updates the context or state in React JS? I have already implemented React.memo, but the component still re-renders. Below is my child component: const Ab = () => { console.log(&q ...

The Chrome Extension Javascript popup appears to be empty

Feeling a bit lost on my first attempt at creating a chrome extension. Check out my manifest.json below: { "manifest_version": 2, "name": "Get Offensive Wallpapers", "version": "1.0", "permissions": [ "tabs", "http://*/*", "https://*/*" ], ...

Is there a way for app.use to identify and match requests that begin with the same path?

Given that app.use() responds to any path that starts with /, why does the request localhost:3000/foo match the second method instead of the first? app.use("/",express.static('public'), function(req,res,next) { console.log(& ...

What seems to be the problem at hand, and where exactly is the issue located?

import React from 'react'; const card = ({name, email, id}) => { return( <div className='tc bg-light-green dib br3 ma2 grow bw2 shadow-5'> <img alt="robots" src = {'https://uniqueimage. ...

Angular JS allows for the display of text from a textarea upon clicking the submit button

Q] How can I display a single text message from a textarea upon clicking the submit button in angular-js? Here is the current code that I have: <html ng-app="myApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1 ...

Variable for Sweet Alert Input Box

I am completely new to PHP and JavaScript, so my question is fairly straightforward... I have a JavaScript code snippet (Sweetalert2 text field) and I'm looking to capture the information entered by users in a separate PHP file using AJAX. I've b ...

Switching Unicode icon when element is clicked

My form has two inputs - one for text input and the other for submitting, like a button. I have added an icon to the submit button and want it to change when clicked. <input class="searchBtn" id="submit" name="submit" type="submit" value="&#xf002"& ...

"Enhance Your Text Fields with Angular2 Text Masks for Added Text Formatting

Is there a way to combine text and numbers in my mask? This is what I am currently using: [/\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/] The above code only allows for numbers. How can I modify it to allow f ...

Is it possible to use a link's URL as the action for a modal form submission?

I am writing a Rails application that requires users to store credential information in the database... ...

I'm having trouble sending a POST request using nodejs

Trying to send an app.post request with Postman, but encountering some issues. Here's the code snippet: const express = require('express'); const PORT = 8080; const HOST = '0.0.0.0'; const app = express(); app.listen(PORT, HOST) ...

Variable declared in $scope suddenly losing its definition

Within my directive controller, I've implemented a $watch function as follows: $scope.$watch(function () { return service.abc; }, function(newVal, oldVal) { $scope.abc = {abc: newVal}; }); However, I've encountered issues with the variabl ...

How can I make the font of expandable TreeItems bold in a TreeView?

When iterating through an object and converting the key/value pairs to Material-UI TreeItems, is there a method to apply custom styling (such as setting the font-weight to bold) to expandable TreeItems? ...

Tips for utilizing an object key containing a dash ("-") within it

Here is an example of the object structure: { approved_for_syndication: 1 caption: "" copyright: "" media-metadata: (3) [{…}, {…}, {…}] subtype: "photo" } How can I properly a ...

What is the reason for recursion not producing a new object as output?

Trying to filter out nodes in a recursion function that iterates through a tree based on the registry property. function reduceNodesRegistry(source: any) { if (!source.registry) return source; return { ...source, children: s ...

Canceling a promise in a Vuex action

I am looking to implement the ability to cancel a running promise in my Vue component, specifically a promise returned by a Vuex action. In my scenario, the Vuex action is continuously polling an endpoint for status updates, and I need the capability to s ...

Setting up Apache's mod_proxy for handling ProxyPass and ProxyPassReverse to facilitate cross-domain ajax requests

I'm currently developing an HTML5-JavaScript mobile app using PhoneGap and need to interact with a REST service. The REST service is hosted at "http://localhost:8080/backend/mvc/" My development environment consists of a WAMP server (Apache2) at htt ...

Unable to invoke the setState function within the onSubmit handler of Formik

Every time I submit my form, I want to display an alert. I attempted to pass my state as a prop to the component, but it didn't work. Here's how my class state looks: this.state = { alert_variant: '', alert_heading: ...

Is your Ajax response suddenly failing to work after the initial attempt?

Describing my predicament: The code snippet below is what I have been using to insert a custom-designed div into my webpage. Initially, the div is successfully added; however, it stops working after the first instance. $('#addanother').click(fu ...

What is the best way to set jade as a global variable in a node.js Express application?

Currently, the routing function shown below is operational: exports.summary = function(req, res, next) { var jade = require('jade'); res.render('myView', { main: jade.renderFile('./views/summary.jade') }); }; The ...