一种模式，用于使 userId 可用于 JavaScript，而不会破坏缓存

A pattern to make userId available to a JavaScript without busting the cache

本文关键字：用于 JavaScript 缓存 一种 模式 userId      更新时间：2023-09-26

我有一个页面很少的网站。
其中一些页面需要 userId 和 userName 才能在 JavaScript 上下文中进行任何处理。

注意：用户标识未用于安全，也不会发送回服务器，因此欺骗不是问题。

问：将 userId 和 userName 传递给 JavaScript 上下文的好方法是什么？

更新理想情况下，我想要一个通用模式，可用于将任何数据(例如列表排序和过滤器设置的默认值(从服务器传递到 JavaScript 代码，这样我就不会解决 userId 问题与传递 initialSort 和 initialFilter 值的问题不同。

以下是我能想到的一些方法。我确实知道所有这些都会起作用，但我希望有一个更好的模式。我也有兴趣了解我在这里考虑的解决方案的其他缺点：

1. 将来自服务器的用户名 ID 和用户名作为非服务器 cookie 传递。
缺点：cookie 将随每个请求一起发送回服务器，这是一种浪费(虽然不是一个重要的浪费(。

2. 使用自定义标头
缺点：标头不适用于初始请求的javascript。

3. 发出 AJAX 请求以获取数据
缺点：需要额外的HTTP行程。

4. 在初始页面 HTML
中内联呈现数据缺点：破坏缓存并使页面不可缓存。

5.切换极性(在《星际迷航》中每次都有效(，到目前为止
我最喜欢的而不是在初始行程中获取大部分 HTML - 重写页面，以便初始页面主要返回数据，而标记单独加载(和缓存(。例如：

<html><body>
    <div data-bind="template: 'pages/invoices'" /> <!-- using KO external template to load markup -->
    <script src="require.js"></script>
    <script>
         require([...], function (...) {
             var vm = new PageViewModel('userId-bob', 'Bob Smart'); // <-- content rendered by server
             ko.applyBindings(vm);
         });
</script></body></html>

缺点：页面是搜索爬虫敌对的(在我的情况下不是问题(。

我要做的是让它使用 sessionStorage。

加载页面时，检查会话存储对象以获取所需的数据。

如果 sessionStorage 中不存在数据，那么您就知道这是页面第一次加载(至少对于此会话(。然后，您可以执行 ajax 调用来获取这些数据并存储它们。

如果数据确实存在于 sessionStorage 中，则无需执行任何其他 ajax 调用。

这应该将您减少到每个会话一次且只有一个额外的 HTTP 行程，这对我来说似乎很合理。

类似的东西

if(sessionStorage.userId && sessionStorage.userName) {
    //the data exist, assign them to a global var or pass to the function that needs them
} else {
    //the data do not exist, make an ajax request to get the data and store them
}

鉴于您的上下文，我可能会将其放在 cookie 中，而不用担心开销。

相关文章：