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 theme 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
<head>
<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>
</body>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
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');
To remove a specific data:
localStorage.removeItem('objectName');
To remove all data:
localStorage.clear();