如何修改URL使GitHub Pages同站点加载独立的localStorage实例

实现原理说明 #

localStorage 严格遵循浏览器同源策略，仅当页面的协议、域名、端口三者完全一致时才会共享同一份存储空间，URL中的路径、查询参数、哈希值变化不会改变同源判定。你之前用查询参数/哈希区分实例的方案，本质还是在同一份localStorage里用前缀隔离数据，总存储容量是共享的，自然会触发上限问题。

可行解决方案 #

以下两种方案都可以实现加载同一套页面代码、各实例使用独立localStorage空间的需求：

• 方案1：使用自定义子域名（推荐，无需多部署代码）
  如果你有自有域名，可以为不同实例配置不同的二级子域名，所有子域名的DNS都解析到你当前的GitHub Pages地址，同时在GitHub Pages的自定义域名设置中绑定所有用到的子域名即可。
  不同子域名会被浏览器判定为独立源，每个实例的localStorage容量各自独立计算，互不占用。比如你可以用https://inst1.example.com、https://inst2.example.com分别访问不同实例，两个实例的存储完全隔离，各有至少5M的独立容量。
• 方案2：部署到不同GitHub账号的Pages仓库
  不想使用自定义域名的话，可以把同一套站点代码分别部署到多个不同GitHub账号的Pages仓库下。
  由于https://账号A.github.io/PNGTube和https://账号B.github.io/PNGTube属于不同域名，浏览器会判定为不同源，两个实例的localStorage完全独立，各自的存储容量不会互相占用，无需修改业务代码即可直接使用。

低成本替代方案 #

如果不想调整部署方式，也可以把体积较大的图片资源从localStorage迁移到IndexedDB存储，IndexedDB单库容量通常支持数百M级别，远高于localStorage的5M左右上限，就算多实例用前缀区分数据也不用担心容量不足的问题，代码改动量更低。

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