将按钮 state 保存在 cookie 中或 Jquery 中的 localStorage

Question

I am trying to persist a button state in a cookie for a certain amount of time using either cookies (cookie.js library) or LocalStorage. I have not done this before so I am not sure how I can approach it.

The state I want to persist for at least a day would be changing the button's text using Jquery text function as follows:

$(_this).text("Job already started or completed...");

This action would pretty much be done on an onClick event.

Answer 1

Local storage is vanilla JS, it works with or without jQuery. It's fairly simple:

localStorage.setItem('buttonText', 'Job already started or completed...');

That stores it. Then to read it:

const storedButtonText = localStorage.getItem('buttonText');

From there you can do whatever you want with that text, including passing it into a jQuery function to set some DOM element's text or whatever else you want.

You will want to load that data on page load if you want to persist across reloads:

$(document).ready(function() {
    const storedButtonText = localStorage.getItem('buttonText');
    if (storedButtonText) {
        $('#theButtonElement').text("Job already started or completed...");
    }
});