在执行服务端渲染（例如使用EJS模板引擎）时，通常是在服务器环境下进行的，而`localStorage`是一个仅存在于浏览器环境的Web API，用于在用户的浏览器上存储数据。由于服务器端没有访问浏览器`localStorage`的能力，EJS模板直接访问`localStorage`是无法实现的。

但是，您可以在EJS模板中嵌入客户端JavaScript代码，该代码在模板被发送到客户端并在浏览器中解析后运行。在这个客户端代码中，您可以正常地访问`localStorage`。下面是一个如何在客户端JavaScript中使用`localStorage`的例子：

```html
<!DOCTYPE html>
<html>
<head>
  <title>LocalStorage Example</title>
</head>
<body>
  <h1>Welcome to our website</h1>

  <script type="text/javascript">
    // 检查localStorage是否可用
    if (typeof(Storage) !== "undefined") {
      // 尝试从localStorage获取数据
      var data = localStorage.getItem('someKey');
      
      if (data) {
        console.log('Data retrieved from localStorage:', data);
        // 这里可以将获取到的数据用于各种用途，例如显示在页面上
        // document.getElementById('someElement').textContent = data;
      } else {
        console.log('No data in localStorage for key "someKey"');
      }
    } else {
      console.log('Sorry, your browser does not support Web Storage...');
    }
  </script>
</body>
</html>
```

在上面的例子中，当EJS模板在服务器端渲染并发送到客户端浏览器时，JavaScript代码将会检查浏览器是否支持`localStorage`，然后尝试从中获取键为`someKey`的数据。如果找到了数据，它会在控制台中打印出来，否则，它会打印出一条消息说没有找到数据。

如果你想在服务器端与客户端之间共享数据，通常的做法是在服务器端渲染模板时将数据嵌入到模板中，然后在客户端通过JavaScript将数据保存到`localStorage`中。这样，数据在客户端可以被进一步使用，而不是直接在服务器端尝试访问`localStorage`。

例如，在EJS模板中，您可以这样插入数据：

```ejs
<script type="text/javascript">
  // 假设我们从服务器端传递了一个变量 `serverData`
  var serverData = <%- JSON.stringify(serverData) %>;

  // 存储到localStorage
  localStorage.setItem('serverData', serverData);
</script>
```

在上面的EJS代码段中，`serverData`是从服务器端传递到模板的变量。模板在插入这些数据时将其转换为一个JSON字符串，然后这段客户端JavaScript代码会在页面加载时运行，将数据存储到`localStorage`中以供后续使用。

How to access localStorage from ejs template

1个答案

你的答案