So I’m making this website for a personal project (my class’ entertainment) and I’ve decided to make the site capable of switching themes at the user’s click of a dropdown menu, what I want to do is be able to have the last them they chose saved as the theme that it will automatically set when they re-open the site
here’s the important part of the code
<link rel="stylesheet" type="text/css" href="../stylesheets/font.css">
<link rel="stylesheet" href="../stylesheets/stylesheet.css">
<style>
.titlecont h1 {
font-size: 13vw;
}
</style>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
localStorage.setItem /*NO CLUE WHAT TO DO*/
}
</script>
</head>
<body>
<div class="dropdown">
<button>Thèmes</button>
<div class="dropdown-content">
<a onclick="swapStyleSheet('')">Aucun</a>
<a onclick="swapStyleSheet('../stylesheets/table.css')">Table</a>
<a onclick="swapStyleSheet('../stylesheets/languagecss/french/coffeehousefrench.css')">Café</a>
</div>
</div>
I was hoping to be able to do that by implementing LocalStorage, the issue is, I can’t seem to get it to work (I ain’t got a dang clue how it works and I can’t find the answer on the internet). could someone maybe help me, or point me to a place where I can find a solution that works for my code
>Solution :
MDN
The localStorage read-only property of the window interface allows you
to access a Storage object for the Document’s origin; the stored data
is saved across browser sessions.
Refer to this.
To store data:
localStorage.setItem("objectName", "value")
To get the stored data:
const a = localStorage.getItem('objectName');
The remove a specific data:
localStorage.removeItem('objectName');
The remove all data:
localStorage.clear();