AMP 并将数据存储在本地存储中

Question

据我所知，不可能将数据存储在AMP页面的本地存储中。

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

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

Answer 1

我不知道AMP从什么时候开始支持amp脚本或localStorage，但现在可以使用它们，因此您可以将用户设置(如深色/浅色模式首选项)保存在localStorage中。

他们的网站中有一个例子：https://amp.dev/documentation/examples/components/amp-script/#local-storage

您的脚本有权访问 Web 存储 API。这使您可以在浏览器会话之间保留用户信息。在这里，我们使用本地存储来跟踪用户名。如果您设置了用户名，然后重新加载此页面，则用户名将保持设置状态。

<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>