Repairing the Performance of the 'Save' Feature

Question

Repairing the Performance of the 'Save' Feature

Can the 'Save' button in my code save team assignments for players selected using drag and drop? I'm considering using localStorage, but unsure about implementation.

Note: To run the code properly, copy it as an HTML file on your computer.

/* MODIFY THESE VARIABLES */
var boxSizeArray = [13,13,13,13,13,13]; 
var arrow_offsetX = -5; 
var arrow_offsetY = 0;
// other variables...

...
// Javascript code

...

// CSS style

body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
background-color:#E2EBED;
}

// more CSS styles...

/* End main container CSS */

<div id="dhtmlgoodies_dragDropContainer">
    <div id="topBar">
        <img src="/images/heading3.gif" />
    </div>
    
    // HTML structure
    
</ul>

javascript jquery html css

Answer 1

Answer №1

To begin, simply assign a value to a variable using:

localStorage.exampleVar = 'World';

Then, you can retrieve the value with:

var output = localStorage.exampleVar;

Answer 2

To begin, simply assign a value to a variable using:

localStorage.exampleVar = 'World';

Then, you can retrieve the value with:

var output = localStorage.exampleVar;

Answer 3

Answer №2

Appreciate the jsfiddle share. It's clear that there's a better approach by creating an array structure to save data, but this example provides a glimpse of the possibilities.

https://jsfiddle.net/abc123xyz/4/

$(function(){
    $('#save_btn').click(function(){
    localStorage.setItem('data_list', $('#data_list').html());
    localStorage.setItem('main_container', $('#main_container').html());
  });
});

function loadSavedData() {
  var data_list = localStorage.getItem('data_list');
  var main_container = localStorage.getItem('main_container');

  if(data_list) {
    $('#data_list').html(data_list);
  }

  if(main_container) {
    $('#main_container').html(main_container);
  }

  initializeDragDrop();
}

Answer 4

Appreciate the jsfiddle share. It's clear that there's a better approach by creating an array structure to save data, but this example provides a glimpse of the possibilities.

https://jsfiddle.net/abc123xyz/4/

$(function(){
    $('#save_btn').click(function(){
    localStorage.setItem('data_list', $('#data_list').html());
    localStorage.setItem('main_container', $('#main_container').html());
  });
});

function loadSavedData() {
  var data_list = localStorage.getItem('data_list');
  var main_container = localStorage.getItem('main_container');

  if(data_list) {
    $('#data_list').html(data_list);
  }

  if(main_container) {
    $('#main_container').html(main_container);
  }

  initializeDragDrop();
}

Answer 5

Answer №3

In order to preserve data, it is essential to utilize a server-side language like PHP for the task; I am under the impression that HTML is incapable of achieving this due to its utilization of Shadow Root, also referred to as Shadow Dom, which replicates the code in the browser without granting permission to modify local storage files.

Answer 6

In order to preserve data, it is essential to utilize a server-side language like PHP for the task; I am under the impression that HTML is incapable of achieving this due to its utilization of Shadow Root, also referred to as Shadow Dom, which replicates the code in the browser without granting permission to modify local storage files.

Repairing the Performance of the 'Save' Feature

Answer №1

Answer №2

Answer №3

Similar questions

While it is possible to filter by friend.brand.id within friends in Angular, unfortunately the || undefined trick cannot be used to reset the filter when it is NULL

Can you provide some straightforward instances of single-axis zooming using d3?

The preflight request's response failed to meet the access control criteria due to the absence of the 'Access-Control-Allow-Origin' header

CSS3 rotation animation - begins to rotate and then halts at a specific angle

Remove newline character from HTML code using Python 3.2 and urllib module

Error will be thrown if the initialDueDate parameter is deemed invalid in Javascript

Disable the borders on HTML input fields

The silent button malfunctioning - Ionic

Node Signature Generation for Gigya Comment Notifications

Is it possible to share a Vue.js component by "transferring" it rather than duplicating it?

The end of the page is not displayed fully in Safari

"Dealing with cross-origin resource sharing (CORS)

Comparing AngularJS and AppML

Steps for transforming an array of objects into an array of values based on a specific key

Filtering an array of JSONs in Vue.js using a separate array of JSONs

Angular - Dividing Functionality into Multiple Modules

Is there a way for users to share their thoughts in response to the posts of

Efficiently Extracting Data from an Array of Objects Using JQuery

Is it a bad idea to incorporate JavaScript functions into AngularJS directives?

Accessing the element within an ion-tab using document.getElementById