fix: solved multiple session storage conflicts

Author: henryhale

README.md

@@ -11,10 +11,13 @@ A front-end code playground tool right in your browser. It's intended for use wh
 
 ## Features
 
-- Easy to use
 - Minimal and fast
 - Live updates and preview
-- Builtin IDE with syntax highlighting, suggestions, and more
+- Fullscreen mode
+- Theme: Light/Dark/System
+- Export as single HTML page or ZIP file 
+- Multiple Layouts - editor only, preview only or split (vertical/horizontal)
+- Builtin IDE with syntax highlighting, suggestions/autocomplete, and more
 - Local storage for backup (CTRL + S to save and automatic restore)
 
 ## Demo

source/components/BaseHeader.vue

@@ -32,7 +32,8 @@ const store = useAppStore();
 
 const switchTheme = (v) => (store.theme = v);
 const switchView = (v) => (store.layout = v);
-const newTab = () => window.open(window.location.href);
+const newTab = () =>
+    window.open(window.location.href + `?session=${Date.now().toString(32)}`);
 const closeTab = () => window.close();
 const reloadTab = () => window.location.reload();
 const downloadAsPage = () => exportAsPage(store.code);

source/helpers/storage.js

@@ -25,7 +25,12 @@ export const template = {
         'let count = 0;\n\nconst btn = document.querySelector("button");\n\nbtn.onclick = () => {\n  btn.textContent = `Count: ${++count}`;\n};\n\nbtn.click();\n'
 };
 
-const STORAGE_KEY = "livecode-backup";
+// storage key for a new session in a different window or tab
+const sessionKey = new URLSearchParams(window.location.search).get("session");
+
+const STORAGE_KEY = sessionKey
+    ? `livecode-window-${sessionKey}`
+    : "livecode-backup";
 
 export function restore() {
     const data = getData(STORAGE_KEY);