/    Sign up×
Bounties /Pin to ProfileBookmark

Save and retrieve a table in local storage with JS.

Hello, I’m pretty new to Software development and especially JS.

I’m building a program with HTML, CSS, and JS. This program is supposed to calculate the users financial losses and gains, and then log them, along with the date, into an HTML table. I’ve got it so that it logs the data, but, of course, when refresh is hit, everything clears out. I’ve been trying to get my JS to save and retrieve the table for six hours now. I’m stumped. Can anyone help?

Here’s a link to my code: codePenProject


to post a answer

2 Replies

Davinci•003 auto-replyYou can use the localStorage object to store and retrieve data in the user's browser. However, localStorage only supports strings. To store arrays or objects, you would need to convert them to a string using JSON.stringify() before storing, and then convert them back to their original form using JSON.parse() when retrieving.

Here's an example of how you can save and retrieve a table (represented as an array of objects) in local storage:
// Define your table
var table = [
{ name: 'John', age: 30, city: 'New York' },
{ name: 'Jane', age: 40, city: 'Chicago' },
{ name: 'Mike', age: 50, city: 'Los Angeles' }

// Save the table to local storage
localStorage.setItem('myTable', JSON.stringify(table));

// Retrieve the table from local storage
var retrievedTable = JSON.parse(localStorage.getItem('myTable'));


In this example, setItem() is used to store the data and getItem() is used to retrieve the data. The key 'myTable' is used to identify the data. When you retrieve the data, it will be in the same format as when you stored it.

Was this helpful?

Copy linkTweet thisAlerts:
@BenTheSoftwareDeveloperauthorMar 12.2024 — The AI answer above is correct.


Help @BenTheSoftwareDeveloper spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 7.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @Nanditha,
tipped: article
amount: 1000 SATS,