Vue.js项目同域名下不使用数据库如何实现跨浏览器文本值传递？

你当前的代码是纯客户端本地逻辑，所有输入值仅存储在当前访问设备的浏览器内存中。电脑端和手机端的浏览器是完全独立的运行实例，数据不会自动跨设备同步，所以手机端自然无法读取电脑端输入的内容。

你用的是Vue3组合式API，setup()中没有组件实例的this指向，你当前getvalue函数里的this调用全部是错误的，正确写法如下：

function getvalue() {
  value.value = null
  searchid.value = searchidinput.value
  const el = document.getElementById(searchid.value);
  if (el) {
    value.value = el.value
    console.log(value.value);
  }
}

跨设备的浏览器无法直接通信，必须通过站点对应的服务端做数据中转，以下两种方案都不需要数据库，仅用服务端内存暂存数据即可：

• 方案1：HTTP接口轮询（实现最简单）
  给你的前端服务新增两个简单接口，用服务端全局变量存储数据，重启服务后数据会丢失，满足无数据库要求：

  1. 存值接口：POST /save-value，接收参数id和value，服务端用对象存储对应键值对
  2. 取值接口：GET /get-value?id=xxx，返回对应id存储的value值
     前端修改逻辑：
  • 给id为1、2的输入框绑定input事件，每次内容变化时调用存值接口把最新值上传到服务端
  • getvalue函数不再读取本地DOM，直接调用取值接口获取对应id的内容后赋值展示

• 方案2：WebSocket实时同步
  在服务端新增WebSocket服务，所有访问站点的设备都和服务端建立WebSocket连接：

  1. 任意设备输入内容变更时，发送消息到服务端，服务端更新内存中的键值对
  2. 可选择主动拉取或者服务端主动推送最新值到所有连接的设备，实现实时同步，不需要手动点击按钮拉取

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