Storing and retrieving an HTML editable array using COOKIES in JavaScript

Question

Storing and retrieving an HTML editable array using COOKIES in JavaScript

In my code, I have created an editable array where you can input student information. A button computes the grade for each student at the end of the line. Additionally, there are buttons to add rows for students and columns for different assignments.

Now, I want to enhance the functionality by adding two more buttons - one to save the filled array in a Cookie and another to load this information back into the array.

I'm currently facing a challenge when it comes to saving and loading data using cookies.

Below is the snippet of my code:

var ass = 1;

// Functions for calculating grades, adding rows and columns

...

// Buttons linking and functions for saving and loading cookies.

...

function save_cookie() {
    setCookie("array", array, 30);
    
var array = document.getElementById("Student_Table");

alert (array + " saved");
}

function load_cookie(){ }

...

<table class="tg" id="Student_Table">
  <tr>
    <th class="tg-baqh">Student Name<br></th>
    <th class="tg-baqh">Student ID<br></th>
    <th class="tg-baqh">Assignment 1<br></th>
    <th class="tg-baqh">Final Grade<br></th>
  </tr>
  <tr>
    <td class="tg-yw4l" contenteditable="true"></td>
    <td class="tg-yw4l" contenteditable="true"></td>
    <td class="tg-lqy6" contenteditable="true"></td>
    <td></td>
  </tr>
</table>

<a href="#" class="myButton" id="click" onclick="Grade()">grade</a>

<a href="#" class="myButton" id="click2" onclick="add_row()">add row</a>

<a href="#" class="myButton" id="click3" onclick="add_column()">add column</a>

<a href="#" class="myButton" id="click4" onclick="save_cookie()">Save data</a>

<a href="#" class="myButton" id="click5" onclick="load_cookie()">Load data</a>

Your assistance is greatly appreciated.

Regards,

Eric

javascript arrays cookies

Answer 1

Answer №1

When briefly looking over the code, a few changes come to mind:

function save_cookie() {
    setCookie("array", array, 30);

    var array = document.getElementById("Student_Table");

    alert (array + " saved");

}

Perhaps it would be better structured like this:

function save_cookie() {

    var array = document.getElementById("Student_Table");

    setCookie("array", array, 30);

    alert (array + " saved");

}

Additionally, it's recommended to encode the data or convert it into JSON format:

function save_cookie() {

    var array = document.getElementById("Student_Table");

    var json = {
           "array": array
    }

    setCookie("array", JSON.stringify(json), 30);

    alert (array + " saved");

}

In the getCookie function, consider implementing the following:

if (c.indexOf(name) == 0) {
    var cstring = c.substring(name.length, c.length);

    // error handling omitted
    return (JSON.parse(cstring)).array;
}

Answer 2

When briefly looking over the code, a few changes come to mind:

function save_cookie() {
    setCookie("array", array, 30);

    var array = document.getElementById("Student_Table");

    alert (array + " saved");

}

Perhaps it would be better structured like this:

function save_cookie() {

    var array = document.getElementById("Student_Table");

    setCookie("array", array, 30);

    alert (array + " saved");

}

Additionally, it's recommended to encode the data or convert it into JSON format:

function save_cookie() {

    var array = document.getElementById("Student_Table");

    var json = {
           "array": array
    }

    setCookie("array", JSON.stringify(json), 30);

    alert (array + " saved");

}

In the getCookie function, consider implementing the following:

if (c.indexOf(name) == 0) {
    var cstring = c.substring(name.length, c.length);

    // error handling omitted
    return (JSON.parse(cstring)).array;
}

Storing and retrieving an HTML editable array using COOKIES in JavaScript

Answer №1

Similar questions

Is it possible to add some color to the first table in the div

In JavaScript, what is the best way to target the initial option element in HTML?

What is the reasoning behind the "open in a new tab" function triggering a GET request?

Updating the input value in a React application

Tips for displaying two dynamic variables that are interdependent

Dynamic Translation Service for Ionic 2 and Angular 2 with ngx-translate

What is the best way to conceal a row when a particular field is devoid of content?

Shuffle contents of a Div randomly

How can I retrieve data from a JSON object?

Difficulty encountered in utilizing clearTimeout for undefined popover variable

Leveraging the callback function to display information from a JSON file

Game board in disarray due to an unexpected array exceeding its limits

The argument represented by 'T' does not align with the parameter represented by 'number' and therefore cannot be assigned

Is it advisable to load 10,000 rows into memory within my Angular application?

Creating an AI adversary for a simple Tic Tac Toe game board: a step-by-step guide

Improprove the Express Router in a Node.js application

Incorporate a Vue.js computed property into the data retrieved from a server

Identifying and capturing changes in child scope events or properties in Angular

Steps to retrieve the final page number from ngx-pagination with Angular

Trouble with NodeJS NPM