如何创建自定义WebLink及基于URL的本地对象存储专属页面？

一、自定义URL生成方案 #

前端生成GM分享链接 #

• 核心逻辑：为每个GM会话生成唯一标识，拼接在主页面URL中作为区分标识，支持路径参数或查询参数两种格式
  • 示例格式：
    • 查询参数：/player-main?sessionId=abc123xyz
    • REST路径：/player-main/abc123xyz
• 实现细节：
  • 生成唯一ID：使用浏览器原生crypto.randomUUID()（兼容性好，推荐），或自定义随机字符串（如Math.random().toString(36).slice(2, 10)）
  • URL编码：用encodeURIComponent()处理特殊字符，避免解析异常
• 学习重点：
  • 理解URL的结构组成（路径、查询参数、哈希的适用场景）
  • 掌握前端字符串处理与URL编码方法

Java后端生成角色专属链接 #

• 核心逻辑：创建角色时生成角色唯一ID，关联GM会话ID，构建规范的角色页面URL返回前端
• 实现细节：
  • 生成唯一标识：用Java自带java.util.UUID类（UUID.randomUUID().toString()），或雪花算法（适合分布式场景）
  • 规范构建URL：使用Spring的UriComponentsBuilder工具类，避免手动拼接的错误
  • 代码示例：

    String sessionId = "GM会话唯一标识";
    String roleId = UUID.randomUUID().toString();
    // 构建带参数的角色访问链接
    String roleUrl = UriComponentsBuilder.fromHttpUrl("http://your-domain/role-detail")
        .queryParam("sessionId", sessionId)
        .queryParam("roleId", roleId)
        .toUriString();
    

• 学习重点：
  • Java中唯一ID生成的常用方案及适用场景
  • Spring框架中URL构建工具的使用（若使用Spring技术栈）

二、基于URL的本地存储隔离方案 #

核心思路 #

以URL中的会话标识（如sessionId）作为本地存储的命名空间前缀，让不同GM会话的数据存储在独立的键下，实现完全隔离。

前端实现细节 #

• 数据存储与读取：
  1. 从URL中解析会话标识：const sessionId = new URL(window.location.href).searchParams.get('sessionId')
  2. 给存储键名添加前缀：如${sessionId}_playerList、${sessionId}_roleData
  3. 代码示例：

  const sessionId = new URL(window.location.href).searchParams.get('sessionId');
  // 存储角色数据
  localStorage.setItem(`${sessionId}_currentRole`, JSON.stringify(roleObject));
  // 读取角色数据
  const savedRole = JSON.parse(localStorage.getItem(`${sessionId}_currentRole`) || '{}');
  

• 边界处理：
  • 若URL中无sessionId，直接跳转回GM的玩家数量输入页面
  • 定期清理过期数据：存储时附带时间戳，每次访问时检查并删除超出有效期的会话数据
• 学习重点：
  • localStorage/sessionStorage的API使用与特性差异
  • 前端数据隔离的命名空间设计思路

后端辅助隔离（可选） #

如果需要持久化数据，后端可将sessionId作为数据主键的一部分，存储GM会话及角色数据，前端通过URL中的sessionId和roleId请求对应数据，实现后端层面的数据隔离。

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