local-storage - AMP 和在 LocalStorage 中存储数据

Question

据我所知，无法将数据存储在 AMP Page 的本地存储中。

用户个性化设置识别的最佳解决方案是什么？

在使用服务器端解决方案时，例如 amp-list，是否意味着用户必须在某种程度上注册或登录？

Answer 1

我不知道 AMP 从什么时候开始支持 amp-scripts 或 localStorage，但现在可以使用它们，因此您可以在 localStorage 中保存用户设置(如暗/亮模式首选项)。
他们的网站上有一个例子: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>