HTML事件处理机制及页面跳转传值实现咨询

1. onclick这类事件的处理与存储逻辑 #

onclick这类事件是浏览器DOM提供的交互触发机制，DOM本身没有持久化存储能力。默认情况下，事件只会在浏览器端执行你编写的JavaScript代码（比如弹出提示、修改页面元素），不会自动把用户操作数据保存到SQL、MongoDB这类数据库里。

如果需要把用户的操作数据存到数据库，必须自己实现后端逻辑：通过AJAX请求、表单提交等方式，把数据从前端发送到服务器，再由服务器端代码（比如Node.js、Python后端）将数据写入对应的数据库。

2. 跨页面渲染对应图片的实现方案 #

完全不需要数据库，有几种简单的前端实现方式：

• URL参数传递：给两个按钮设置不同的跳转链接，比如按钮1跳转到page2.html?img=image1.png，按钮2跳转到page2.html?img=image2.png。在第二个页面的JavaScript里，读取URL中的img参数，然后设置图片标签的src属性：

  // page2.html 中的JS代码
  const params = new URLSearchParams(window.location.search);
  const imgSrc = params.get('img');
  document.getElementById('target-img').src = imgSrc;
  

• 浏览器本地存储：点击按钮时，把对应图片的路径存入sessionStorage或localStorage，第二个页面加载时读取这个值：

  // 第一个页面的按钮点击事件
  document.getElementById('btn1').addEventListener('click', () => {
    sessionStorage.setItem('selectedImg', 'image1.png');
    window.location.href = 'page2.html';
  });
  
  // page2.html 中的JS代码
  const selectedImg = sessionStorage.getItem('selectedImg');
  if (selectedImg) {
    document.getElementById('target-img').src = selectedImg;
  }
  

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