4

I have created the following code in order to allow the user to change the stylesheet of my website from light to dark.

<div class="style-changer"><span>Change Style:</span>
<button class="white" onclick="swapStyleSheet('white.css')">Light</button>
<button class="black" onclick="swapStyleSheet('black.css')">Dark</button>
</div>

<link id="pagestyle" rel="stylesheet" type="text/css" href="white.css">
<script>function swapStyleSheet(sheet){ document.getElementById('pagestyle').setAttribute('href', sheet);}</script>

That code currently sets the default stylesheet as white.css whenever the page is loaded, and then changes it to dark css when the dark button is clicked.

What I want to do is make it set a cookie so that the site remembers the dark button has been pressed and then loads dark.css as the default, instead of loading white.css as it normally would.

If anyone could help me add some code to this to make it do that I would appreciate it as I'm a bit of a noob when it comes to javascript and cookies.

Thanks.

Update: I have made some code using some suggestions with local storage, however I reckon I might have got it completely wrong, here's a link:

https://jsfiddle.net/zy360m7m/3/

NGriffin
  • 71
  • 1
  • 7
  • Have you tried to work out how to set a cookie (google, StackOverflow questions)? If so, please post your attempts, and the results. If not, this is the time to start :) – Mackan Apr 18 '15 at 17:13

4 Answers4

3

You have some options. Here are a couple popular ones:

1) You can use localStorage which acts as a cache which persists depending on the user's browser settings. 

localStorage.setItem('darkWasPressed', 'true');

localStorage.getItem('darkWasPressed'); // returns 'true'

2) A non-persistent alternative is sessionStorage which allows a global object to exist with the tab or window that is open. 

sessionStorage.setItem('darkWasPressed', 'true');

sessionStorage.getItem('darkWasPressed'); // returns 'true'

3) You can also just create a cookie. Doing this is as simple as:

document.cookie = 'darkWasPressed=true';

And then, you can just retrieve it using "document.cookie", but getting the right cookie and value takes a little parsing to do.

4) To help make #3 easier, we can use a simple reader/writer library.

Here is how we can use cookies using the library documented here:

docCookies.setItem('darkWasPressed', 'true');

docCookies.getItem('darkWasPressed'); // returns 'true'
boombox
  • 2,396
  • 2
  • 11
  • 15
  • That was very helpful, however I'm not sure if i fully understand it, given that a lot of people suggested localstorage I used that, and have written some code, but I think it might be quite wrong. As I said I'm a bit of a noob, here's a link : https://jsfiddle.net/zy360m7m/2/ – NGriffin Apr 18 '15 at 18:14
  • One issue I see in your code is that the can't be referenced with an id by using document.getElementById(). A solution is to just create the CSS to distinguish between black and white using something like "black" and "white" as the class names. So, you can swap the class instead of swapping the css file itself. If you really want/need to swap the css files, this should help: http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript. – boombox Apr 18 '15 at 19:02
  • 2
    Here is something I quickly made based off your jsfiddle. Click either the "Light" or "Dark" button and see the text change between "black" and "white". Then, refresh to see that the text persists using localStorage. Feel free to play around with it to understand how it works. https://jsfiddle.net/b7wtsn54/14/. – boombox Apr 18 '15 at 19:13
  • Your example works great, extremely confusing however, not exactly sure how it works. I was wondering if there's anyway you could show me a similar way of doing this, but instead of adding text, you added a class to an id, I could use something like that to change the entirety of the pages elements in a similar way. – NGriffin Apr 18 '15 at 19:47
  • Check this out on "classList": https://developer.mozilla.org/en-US/docs/Web/API/Element/classList. You can use the "add", "remove", and "contains" or even the "toggle" methods. – boombox Apr 19 '15 at 13:57
2

Try using local storage in JavaScript. To store a string:

localStorage.setItem('Name of Value', JSON.stringify("Your String"));

To retrieve string:

var retrievedObject = JSON.parse(localStorage.getItem('Name of Value'));
Dan12-16
  • 351
  • 1
  • 8
1

JavaScript contains the document.cookie API for setting and retrieving cookies on the users' computer. It's not terribly complex, I highly recommend reading the documentation there.

Scott
  • 2,753
  • 1
  • 24
  • 31
1

Though cookies are great for storing tiny bits of information they are kind of complex in term of setting and getting their values.

This can be much easily archived with localStorage.

Adi
  • 5,560
  • 1
  • 24
  • 37