The JavaScript function modifies the value stored in the local storage

I'm in the process of developing a website that requires updating the value of my local storage when certain JavaScript functions are executed. Currently, I have this code snippet:

localStorage.setItem('colorvar', '#EBDBC2');

I'm looking to implement a functionality where the value assigned to 'colorvar' changes to a different value of my choice whenever a specific function is triggered. I attempted duplicating the above code within a function and modifying the value, but encountered issues. Can anyone provide guidance on how to create a function that will update the local storage value upon execution?

javascripthtmlcssfrontendstorage

Answer №1

To achieve this functionality, follow these steps:

const storeDataLocally = (data) => localStorage.setItem('info', data);
const retrieveLocalData = () => localStorage.getItem('info');

storeDataLocally('Data_1');
console.log(retrieveLocalData());
storeDataLocally('Data_2');
console.log(retrieveLocalData());

You can view a live demo here: https://jsfiddle.net/abc123de/20/

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

The window.open function is creating a new tab using the specified origin or URL

I have a button within an iframe on the webpage "loclahost:3000". When this button is clicked, it should open a new tab with the URL "www.google.com". However, instead of opening the desired URL, the new tab opens with the following incorrect URL: "http:// ...

javascripthtml

Implementing the Google Maps API into a React application to generate a customized route between two specified points

I'm currently developing a React application that is designed to display the distance between two points on a map. Although I successfully implemented this feature using JavaScript and HTML, I am facing challenges in converting it to React as I am re ...

javascripthtmlreactjsgoogle-maps

Axios cancel token preemptively cancelling request before it is initiated

Currently, I am working on implementing cancellation of axios calls in my project. After reviewing the axios documentation, it appears to be quite straightforward, which can be found here. To begin, I have defined some variables at the top of my Vue compo ...

javascriptvue.jsecmascript-6axios

Scrolling presentation with dynamic animations

Does anyone have any suggestions for creating a scrolling effect similar to the one on this website? I want to implement a scroll effect where each presentation page is revealed one by one when the user scrolls using their mouse wheel, encouraging them to ...

javascriptcssanimationeffectspresentation

How can I verify if a date is after the current date using Node.js?

I am struggling to set up date validation that ensures the date is after the current date. This is what I have attempted so far: Router.post('/home', [ check('due_date') .isDate() .isAfter(new Date.now()) .wi ...

javascriptnode.jsexpressdatevalidation

Is there a method to incorporate the ".then callback" into useEffect?

Is there a way to utilize the ".then callback" to log the word "frog"? I am interested in viewing my token within the async-storage. Once I have obtained my token, I need to append it to the header of a fetch call. Does anyone know how to accomplish this? ...

javascriptreactjsreact-native

Center Items in Flexbox, Implementing React Material with React

In my React App, I am utilizing flexbox and React Material to align the searchbar and clear button on the same line with space between them. Here is the link for reference: CLICK HERE <div className={classes.searchBarSection}> <Paper com ...

cssreactjsmaterial-uiflexboxmaterial-design

Error: The function $translate.use is not available

I initially included the languages en, fr & nl in my app.js file. Realizing this was not a good practice, I moved the translations out of the app.js file and placed them in JSON formatted files. However, upon loading the site now, I encountered a TypeErro ...

javascriptangularjsjsoninternationalizationangular-translate

Why does the loginStatus in Redux become undefined when the component is initially rendered?

Currently diving into Redux and encountering a problem that is new to me as I usually work with React without redux. The issue arises when I attempt to showcase a portion of my state within a component named loginStatus. Despite setting up the state in the ...

javascriptreactjsredux

Utilizing Laravel and Jquery UI for asynchronous communication with the server, passing data from a post request to

I recently constructed a basic Jquery UI slider: $("#sliderNumCh").slider({ range: "min", min: 0, max: 20, step: 1, value: 20, change : function(e, slider){ $('#sliderAppendNumCh'). ...

javascriptphpjqueryajaxlaravel

The Reactjs infinite scroll feature continuously displays fresh data

Every time I scroll, my data is always rendering on page 2 and page 1 disappears, and the items.concat function is not working properly. My fetch data code looks like this: const FetchUrl = async (p) =>{ const Url = await fetch(`api-link=${p}`); ...

javascriptarraysreactjsconcatenationnext.js

Perform a toggle action on the first row when clicking within the current row using Jquery

I've been grappling with the idea of creating a function that can display and hide a comment field when a button is clicked. The challenge here is that there are multiple line items with their own comment boxes. I want to find a way to achieve this wi ...

javascriptjqueryhtmlcss

Lines running horizontally on either side of the text

I recently found a helpful solution on Stack Overflow, but it's not exactly what I'm looking for due to two main reasons: I am unsure how to adjust the width of the lines to make them shorter. The solution uses H2, however, I have already d ...

htmlcsswordpress

What alternative approach can be used to substitute initEvent in typescript?

I am interested in manually triggering a MouseEvent in typescript, but I have discovered that the initEvent method is deprecated. var clickEvent =document.createEvent('MouseEvent'); clickEvent.initEvent('mouseup',true,true); Are there ...

javascripttypescript

Steps for starting up an ExpressJS application

Despite trying everything else, the only thing that seems to produce an error in my code is the "throw new Error" line. I have double-checked that all necessary packages are installed and there are no errors appearing elsewhere in my code. The issue seems ...

javascriptnode.jsexpressmongoosemongodb-atlas

JavaScript makes it simple to display student names based on their ID numbers

Here is my JavaScript code: <script language="Javascript"> var data = { 7: "Jack Black", 8: "John Smith" }; var id = document.getElementById("id"), emp = document.getElementById("name"); id.addEventListener("keyup", function() { emp.value ...

javascripthtmlnumberslookup

Tips for creating a breakpoint in Sass specifically for a 414px iPhone screen size

For my latest project, I am utilizing sass and looking to incorporate a sass breakpoint or media query. My goal is to have the code execute only if the screen size is 414px or less. Below is my existing code: @include media-breakpoint-down(sm) { .sub-men ...

javascriptphphtmlmysqlcss

Obtain the full HTML code for a Facebook album

I am attempting to extract the HTML code from a Facebook album in order to retrieve the photo links. However, since not all photos load at once, cURL only retrieves the links of photos that are initially loaded. Is there a way to fetch the entire loaded H ...

phphtmlfacebookcurl

Enhance the JQuery dropdown by padding with zeros at the beginning for smooth incrementing

I have been attempting to customize a date dropdown in Sharepoint because the default minutes dropdown only allows selection in 5-minute intervals. Initially, I was able to make it work with the code below: $("select[id$='DateTimeFieldDateMinutes&apo ...

javascriptjquery

When using a set of checkboxes, ensure that only one can be selected at any given time

My objective is to have a group of check boxes on a page where only one can be selected at a time. I want the checked box to clear any other selections when clicked. I attempted to implement this functionality in a fiddle, but it does not work as expected. ...

javascriptjqueryhtmlcheckbox