AMP and storing data in LocalStorage

Question

As far i know there is no possiblity to store data in local-storage within AMP Page.

What would be the best solution for user personalized settings identification?

While using server-side solution, for example the amp-list, does it imply that the user must be somewhat registered or logged in?

Vizard

Probably you are talking about amp-access if I understood your aim correct – Tiler

perhaps something deriverded from, then amp-access component require users to be logged in to fetch personalized content. I want output some previously selected settings/preferences which the user has done entering the site for the first time, and restore it, so that he/she is not required to do it again. I was pointed to the amp-list where this could be done but has not yet get any further with that...my first thought was to store that local-storage and then identifying the user, but that is not possible with AMP... so the question is, how to store those user preferences and gain them again? – Vizard

I think you need to look at server-side implementation via cookies functionality – Tiler

could you point me to some useful examples? except for the official site of AMP....neither this one: ampbyexample.com/advanced/favorite_button – Vizard

Unfortunately, there aren't a lot of useful examples, so I haven't anything to provide to you. My point is that you don't need to rely on APM functionality to reach your goal but use your server-side script(if you have such one) and then load your AMP pages with all settings which have been handled by a server-side app – Tiler

that's exactly how i have resolved this issue, thank you Alexander. – Vizard

Answer 1

I don't know since when AMP started supporting amp-scripts or localStorage, but nowadays it is possible to use them, so you can save user settings (like dark/light mode preference) in the localStorage.

They have an example in their site: https://amp.dev/documentation/examples/components/amp-script/#local-storage

Your script has access to the Web Storage API. This lets you persist user information between browser sessions. Here, we use localStorage to track a username. If you set the username, then reload this page, the username will remain set.

<amp-script layout="fixed-height" script="local-storage-script" height="110" class="sample">
  <div>
    <span>Current username: </span>
    <b id="username-display"></b>
  </div>
  <div>
    <label>Enter new username:</label>
    <input id="username-input" type="text" maxlength="20">
  </div>
  <button id="username-submit">Submit</button>
</amp-script>
<script id="local-storage-script" type="text/plain" target="amp-script">
  const submit = document.getElementById('username-submit');
  const input = document.getElementById('username-input');
  const display = document.getElementById('username-display');

  const oldUsername = localStorage.getItem('username');
  display.textContent = oldUsername ? oldUsername : '(not set)';

  function setUsername() {
    const newUsername = input.value;
    localStorage.setItem('username', newUsername);
    display.textContent = newUsername;
  }

  submit.addEventListener('click', setUsername);
</script>

Simon