I encountered an issue with loading an array from session storage in Java Script

I am struggling to restore and reuse a created array in HTML. I attempted using JSON, but it was not successful for me. In the code below, I am attempting to reload items that were previously stored in an array on another page. However, when I try to load them, it does not work. How can I resolve this issue? Do I need to include a header file for JSON? Thank you.

$( document ).ready(function() {
    var count=sessionStorage.getItem('items');      
)};

Answer №1

The feature of the sessionStorageproperty is that it grants access to a session Storage object specific to the current origin. The process involves both stringifying the object before storing it in the session, and parsing it when retrieving the data.

     var user = {'name':'John'};
     sessionStorage['user'] = JSON.stringify(user);
     console.log(sessionStorage['user']);
     var obj = JSON.parse(sessionStorage['user']);
     console.log(Object.keys(obj).length);

To see an example, visit this JSFiddle link. Keep in mind that opening a page in a new tab or window will initiate a new session. Learn more about session storage here.

Answer №2

One method to retain data when using sessionStorage is by converting arrays to strings before storing them and then parsing them back into arrays when retrieving the information.

var numbers = [1, 2, 3];
sessionStorage.setItem("numbers", JSON.stringify(numbers));
var storedNumbers = JSON.parse(sessionStorage.getItem("numbers"));

console.log(storedNumbers);

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

Is it possible to access dl, dt, or dd tags based on their roles within the testing library?

Is there a way to use the testing library to specifically target the dd tag based on its role? <dl> <dt>ID</dt> <dd>123456</dd> </dl> I attempted: screen.getByRole('term', { name: 'ID' }) as wel ...

Retrieving information from a Django model and showcasing it in an HTML table through AJAX

After numerous attempts, I remain unable to successfully display a HTML table using AJAX from a JsonResponse in Django. The closest progress I've made so far is seeing a response in the network console: {"products": "[{\"model\": \"pr ...

Navigating with Express 4

Currently, I am in the process of implementing Passport for user signup by referring to this helpful guide: https://scotch.io/tutorials/easy-node-authentication-setup-and-local Overall, everything is functioning properly except for one issue - after a su ...

Jolt - Self-contained entity- Iteratively substitute property identifiers

I'm new to working with Jolt. I have a JSON payload that represents logical conditions using AND/OR, and it can include an array of conditions called "conditionPredicates", leading to nested conditions like AND(OR(a, b ,c), OR(d,e)). I'd like to ...

Converting JSON Data to Java Object

I need some help with a specific issue I'm encountering. I have retrieved a JSON string from MongoDB and I am trying to extract all the values of 'photo' and store them in an ArrayList. Despite finding examples online, I haven't been s ...

Alter the arrow to dynamically point towards the location of the click source

I am currently working on creating a popover dialog that should point to the element triggering its appearance. The goal is for the arrow to align with the middle of the button when clicked. While I am familiar with using CSS to create pointing arrows, th ...

Invoke the prototype function through an onclick event after dynamically adding a button

Within my code, I have created two prototype functions named showPopup and buildView. The buildView function is responsible for generating dynamic HTML that includes a button. My intention is to invoke the showPopup function when this button is clicked. Ho ...

Issue with JSONB operations fetching arrays

Within a table named temporary_data containing a data field named temporary_data as well, housing the following JSON structure: { "FormPayment": { "student": [ { "fullname": "name stud ...

What is preventing me from renaming a file in PHP when passed through jQuery?

Hello to all users! I've encountered an issue where I can't seem to change the file name in PHP that is being passed from jQuery: Here is the JavaScript code where I pass the file to the PHP handler: var url = '/temp.php'; var xhr = ...

Add the file retrieved from Firestore to an array using JavaScript

Trying to push an array retrieved from firestore, but encountering issues where the array appears undefined. Here is the code snippet in question: const temp = []; const reference = firestore.collection("users").doc(user?.uid); firestore .collec ...

How can I fix the issue of clearInterval not functioning properly in an Electron JS application?

The clearInterval function is not working properly in this code. What can be done to fix this issue? var inter; ipcMain.on("start-stop",(err,data)=>{ console.log(data.data) function start(){ inter = setInterval(fu ...

Attempting to update information in JSON using AJAX and PHP

I am attempting to update key values in a JSON object using PHP, AJAX, and JavaScript to display the new values. Here is an example of my JSON database that needs to be modified: "answer01count": "1", "answer02count": "2", "answer03count": " ...

Node JS Request Params 500 Error

When generating the URI, everything appears to be in order and the list data is displayed on the page. However, when sending the request in the request method, a 500 error occurs instead of the body being returned. Here is the URI: http://yufluyuinnepal.c ...

The links on my Bootstrap navigation menu are fully functional on mobile devices

While my WordPress website with a Bootstrap menu appears to work fine on desktop, I am facing an issue on mobile. The dropdown menu links do not respond when clicked. The hamburger button functionality seems intact as it opens and closes the dropdown menu ...

Display the accurate prompt in the event of 2 `catch` statements

elementX.isPresent() .then(() => { elementX.all(by.cssContainingText('option', text)).click() .catch(error => { throw {message: "Unable to select text in dropdown box"} ...

AngularJS ng-repeat filtering by date is there any solution?

I have a ng-repeat loop with dates in the format below: <small>Added: <strong>{{format(contents.completeddate)}}</strong></small> I am using a datepicker plugin that provides me with 2 objects - a start date and an end date. For ...

Alternate the color over time using CSS

Is there a way to dynamically change the color of a div from black to white every two seconds, and then from white to black, continuously toggling as long as the div is visible? Essentially, I want the div to only be displayed when a user clicks and drag ...

Bring JavaScript Function into Vue's index.html File

Recently in my code files, I noticed the following: function example() { console.log("testing"); } In another file, I have something like this: <head> <script src="../src/example.js" type="text/babel"></sc ...

Fetch information from the Anilist API

I'm currently working on a small Next.js application and I attempted to fetch data from an API (). My goal is to display a collection of Anime covers. In order to achieve this, I had to implement GraphQL. Initially, I wanted to display the names of s ...

Prevent mobile view from activating when zoomed in on the screen

I've built a webpage with a responsive design that adjusts to mobile view on mobile devices or when the screen size is reduced using developer tools. While this functionality works correctly, I have noticed that the design also switches to mobile vie ...