Shopify中能否用Liquid实现LocalStorage/Cookie存储？求替代方案

• Liquid无法直接操作浏览器存储：Liquid是服务器端模板语言，仅在Shopify服务器渲染页面时运行，没法直接访问浏览器的LocalStorage或Cookie——这类存储属于客户端浏览器专属的API，只能在前端环境操作。
• 可行方案（适配Shopify场景）：
  1. Liquid传值+JS操作存储：如果需要把Liquid中的动态数据（比如产品ID、顾客信息）存入浏览器存储，先通过Liquid把数据输出到页面，再用JS读取并存入目标存储。示例代码：

     <!-- 在Liquid模板中输出数据，再用JS写入浏览器存储 -->
     <script>
       // 用json过滤器确保数据格式合法
       const targetProductId = {{ product.id | json }};
       // 存入LocalStorage
       localStorage.setItem('viewedProductId', targetProductId);
       // 或者存入Cookie
       document.cookie = `viewedProductId=${targetProductId}; path=/; max-age=86400`;
     </script>
     

  2. Shopify会话数据配合：如果要存储和Shopify会话绑定的数据，可以先用Shopify后端API（比如顾客API）存储服务器端数据，再通过Liquid渲染到前端，最后用JS存入浏览器存储，实现前后端数据同步。
  3. Metafields做中间存储：如果数据需要长期在服务器端留存，同时前端需要读取，可以把数据存在Shopify Metafields中，通过Liquid渲染到页面后，再用JS写入浏览器存储，兼顾服务器端持久化和客户端快速访问。

总结：Liquid仅能作为服务器端数据到前端的传递桥梁，最终读写浏览器LocalStorage/Cookie的操作，必须由JavaScript完成。

内容的提问来源于stack exchange，提问作者Deong