Saving User Choices Locally-CodePudding

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 >
    <button>Thèmes</button>
    <div >
      <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

CodePudding user response：

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();