WebView2浏览器本地使用时，调用localStorage存储数据会出现报错，如何解决

罗名扬的quicker 创建于 3天3小时前

浏览器控制台报错
Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
at HTMLDocument.<anonymous> (about:blank:359:9)
about:blank:239 Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

我有时会用到浏览器的本地存储功能，但是看样子quicker中的WebView2浏览器会有权限问题，如果使用浏览器打开网页就不会出现这样的问题。目前的解决办法是保存到quicker的变量中，看还有没有更好的解决办法

添加评论

请绑定手机号后发表评论

回复内容

CL 3天3小时前

把代码保存到文件里，使用虚拟服务器或文件路径的方式访问，应该就可以用了。

https://learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/working-with-local-content?tabs=dotnetcsharp

请绑定手机号后发表评论

罗名扬的quicker 2天22小时前

总结一下：直接输入网页内容方法加载的网页 location 设置为 about：blank，其 origin 设置为 null。这意味着不能使用依赖于正在定义的源的 Web API，例如 localStorage 或 indexedDB。
如何使用，需要将html写入到文件中，调用这个文件才能使用localStorage 。下面是一段示例代码：

<html>
  <head>
    <style>
      .container {
        max-width: 600px;
        margin: 20px auto;
        padding: 20px;
        font-family: Arial, sans-serif;
      }
      .saved-data {
        margin-top: 20px;
        padding: 10px;
        background-color: #f0f0f0;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>localStorage Demo</h2>

      <!-- 输入区域 -->
      <div>
        <input type="text" id="dataInput" placeholder="输入要保存的内容" />
        <button onclick="saveData()">保存到localStorage</button>
      </div>

      <!-- 显示区域 -->
      <div class="saved-data">
        <h3>已保存的数据：</h3>
        <p id="savedContent">暂无数据</p>
        <button onclick="clearData()">清除数据</button>
      </div>
    </div>

    <script>
      // 页面加载时读取数据
      window.onload = function () {
        displayData()
      }

      // 保存数据
      function saveData() {
        const input = document.getElementById('dataInput')
        const data = input.value

        if (data.trim() !== '') {
          localStorage.setItem('demoData', data)
          displayData()
          input.value = '' // 清空输入框
        }
      }

      // 显示数据
      function displayData() {
        const savedContent = document.getElementById('savedContent')
        const data = localStorage.getItem('demoData')

        if (data) {
          savedContent.textContent = data
        } else {
          savedContent.textContent = '暂无数据'
        }
      }

      // 清除数据
      function clearData() {
        localStorage.removeItem('demoData')
        displayData()
      }
    </script>
  </body>
</html>

文件另存为index.html。并在quicker中如下设置

接下来是演示图：

经过测试，如果只是需要localStorage，无需映射主机名，但是加载本地的图片就需要了。

请绑定手机号后发表评论

WebView2浏览器本地使用时，调用localStorage存储数据会出现报错，如何解决

回复内容

回复主贴