Possible to keep changed elements?

Is it possible to change a client-sided element for good? For example; I change the background color of this page from white to yellow and next time I load the page it stays white.

Some browsers allow for “user” CSS and JavaScript that could do that.
What browser are you using?

I’m using Chrome

Hmmm, I was able to find the Custom.css file, but Chrome doesn’t seem to use it any longer.

From what I could find by Googling, support was removed around a year ago and now an extension has to be used.

If it’s for a page your making, you would need to save the user changes in a cookie and load that cookie on each visit.

Information that you wish to retain between page visits can be stored in a cookie. The cookie is created by a script when the target element is modified. The new cookie is added to the document.cookie string of the browser.

As an example, a div background colour can be changed at the click of a radio button. The button reference and the background colour are stored as a name/value pair in the new cookie. In this example the document.cookie string looks like this: “bgCol=#F00&&R1;”.

An important part of the cookie information is the expiry date set when the cookie is created. If the expiry date is missing the session cookie is deleted when the browser is closed and no information about the page is retained. In the example script associated with this post the expiry date can be changed. To keep things simple a number of days is used. Positive numbers (1,10 etc) set the expiry date in the future and the page information is retained for that period. Negative numbers set the expiry date in the past and the cookie is deleted from the cookie string and any previously stored information is removed.

The function for creating the cookie looks like this:

function setCookie(name, value) 
   { // ==== Enter expiry days here. Negative numbers delete cookie ======
     var dataStr=""+name+"="+encodeURI(value)+"; expires="+getExpDate(4)+"";   
     document.cookie=dataStr; }
 // ----------
// calculate expiry date
 var expDate; 
 function getExpDate(days) 
  { expDate = new Date();
    days=(days===0)? 1 : days;                    // avoids zero day entries     
    return expDate.toUTCString();
// -----------  

Cookies can have additional optional information added, such as host, path, and secure, but these elements are not included in this example.

Using cookies to pass page information depends on cookies being enabled for the browser being used. This method can also fail if private browsing or incognito mode is being used as the cookies are deleted when you exit the browser. If the example program does not work for you, you will need to check the browser security and privacy settings to make sure that browser history and cookies are retained on exit.

Finding the cookies in your browser can be a challenge. Here is a list of locations for popular browsers:

Firefox: tools > pageinfo > security > view cookies
Chrome: devtools > resources > cookies > domain > show cookies
Opera: tools > advanced > cookies > domain
Safari for windows: gear symbol > preferences > privacy > details
IE7-9: gear symbol > F12 dev tools > cache > view cookie info.

The example associated with this post looks for a cookie called “bgCol” on page load. If it finds it, it extracts the background colour and the radio button reference and applies them to the page elements. The page then opens with the saved colour and the correct radio button selected.

If one of the radio buttons is clicked the background colour changes and a new cookie is created storing the colour and the radio button reference in the document.cookie string, ready for the next time the page loads.

You can look at and work with the example program on JSFiddle from this link.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.