Maintain the values of variables established in a userscript

Question

Maintain the values of variables established in a userscript

Currently, I am working on a Tampermonkey script and facing an issue.

In my script, I declared an array as var arr = ["alex", "felix"] which can be updated dynamically based on the script's usage. Each time there is a change, I update the value by adding it to the array like this: arr.push("kelix")

The problem arises when the script is reloaded, and the array reverts back to its initial state var arr = ["alex", "felix"]. The new value added is not preserved in the array. So, how can I ensure that changes made to the variable arr are saved even after reloading the script?

Could anyone provide guidance on how to tackle this issue effectively?

javascript arrays local-storage userscripts

Answer 1

Answer №1

If you're looking to persist data even after reloading a page, one way to achieve this is by using the localStorage feature in JavaScript. Here is an example script that demonstrates how you can change the document title and have it remembered across reloads:

// ==UserScript==
// @name        Remember value
// @namespace   util
// @description Test that remembers any saved value after reload
// @include     http://stackoverflow.com/*
// @version     1
// @grant       none
// ==/UserScript==
// Try to load saved data from local storage
const FIELD_NAME = "userscript_TEST";
var saved = localStorage[FIELD_NAME]?JSON.parse(localStorage[FIELD_NAME]):{};

// Save data when leaving tab
window.addEventListener("unload", function() {
    localStorage[FIELD_NAME] = JSON.stringify(saved);
});
// This changes document title and remembers it
window.changeDocumentTitleForever = function(title) {
    saved["title"] = title;
    document.title = title;
}

// This loads the title after the page has loaded
if(saved.title)
    document.title = saved.title;

To use this in the console, simply call the function with the desired title like so:

changeDocumentTitleForever("test")

Answer 2

If you're looking to persist data even after reloading a page, one way to achieve this is by using the localStorage feature in JavaScript. Here is an example script that demonstrates how you can change the document title and have it remembered across reloads:

// ==UserScript==
// @name        Remember value
// @namespace   util
// @description Test that remembers any saved value after reload
// @include     http://stackoverflow.com/*
// @version     1
// @grant       none
// ==/UserScript==
// Try to load saved data from local storage
const FIELD_NAME = "userscript_TEST";
var saved = localStorage[FIELD_NAME]?JSON.parse(localStorage[FIELD_NAME]):{};

// Save data when leaving tab
window.addEventListener("unload", function() {
    localStorage[FIELD_NAME] = JSON.stringify(saved);
});
// This changes document title and remembers it
window.changeDocumentTitleForever = function(title) {
    saved["title"] = title;
    document.title = title;
}

// This loads the title after the page has loaded
if(saved.title)
    document.title = saved.title;

To use this in the console, simply call the function with the desired title like so:

changeDocumentTitleForever("test")

Answer 3

Answer №2

When creating a userscript, it is advisable to use GM_setValue and GM_getValue over localStorage.

var list = ["john", "sarah"];
try { list = JSON.parse(GM_getValue('list', '["john", "sarah"]')); }
catch (_ignore) { /* continue even if JSON.parse fails */ }
// manipulate the list
list.push('emily');
GM_setValue('list', JSON.stringify(list));

Answer 4

When creating a userscript, it is advisable to use GM_setValue and GM_getValue over localStorage.

var list = ["john", "sarah"];
try { list = JSON.parse(GM_getValue('list', '["john", "sarah"]')); }
catch (_ignore) { /* continue even if JSON.parse fails */ }
// manipulate the list
list.push('emily');
GM_setValue('list', JSON.stringify(list));

Maintain the values of variables established in a userscript

Answer №1

Answer №2

Similar questions

communicating data within a JavaScript file across server and client

jQuery draggable elements can be easily dropped onto droppable areas and sorted

Using v-model in Vue with jQuery integration

Mapping custom colors to paths in D3 Sunburst visualizations can add a vibrant and unique touch

ReactJS - ref returns a value of "undefined"

AJAX code fetching dynamic content without relying on file loading

There are several ways to input values from JavaScript into ASP controls

The id property of undefined cannot be accessed in the discord.js library

Is there a way to incorporate the image that was uploaded from the server onto an HTML page without using the file extension?

Whenever I attempt to populate my modal box with data from my selection, I am greeted with an error message stating "invalid object passed in." What could be causing this issue?

Using JavaScript to dynamically load Cascading Style Sheets based on the current

No data was returned in the responseText of the XMLHttpRequest

Updates are not being reflected in LocalStorage

Creating a central navigation menu for a website

The .change() function is only executing once and not triggered by multiple clicks

Iterating recursively through a tree structure to update properties using Mongoose

ng-repeat unable to function within a textarea

Ways to determine the completion of the compilation process in Angular using the $compile service

Updating input value using v-model in Vue.js does not reflect changes

When a URL is entered, information is not retrieved from the database