两个页面之间怎么用sessionStorage来传输数据
时间: 2023-07-26 12:17:48 浏览: 41
使用sessionStorage可以在同一浏览器窗口的两个页面之间传输数据。以下是使用sessionStorage传输数据的步骤:
1. 在第一个页面中将数据存储到sessionStorage中。
```javascript
sessionStorage.setItem('key', 'value');
```
2. 在第二个页面中获取存储在sessionStorage中的数据。
```javascript
var data = sessionStorage.getItem('key');
```
注意:使用sessionStorage传输数据的前提是两个页面必须在同一个浏览器窗口中打开。如果在不同的浏览器窗口中打开,则无法传输数据。
相关问题
Js 两个页面之间数据怎么传
在 JavaScript 中,可以使用多种方法在两个页面之间传递数据,其中一些常见的方法包括:
1. 使用 URL 参数:可以在一个页面的 URL 中添加参数,然后在另一个页面中使用 JavaScript 解析 URL,获取参数值。
2. 使用浏览器的本地存储:可以使用 localStorage 或 sessionStorage 存储数据,然后在另一个页面中读取该数据。
3. 使用 cookie:可以在一个页面中设置 cookie,然后在另一个页面中读取 cookie 值。
4. 使用表单提交:可以使用表单提交数据到服务器端,然后在另一个页面中从服务器端获取该数据。
5. 使用 AJAX 请求:可以使用 AJAX 请求从服务器端获取数据,然后在另一个页面中使用该数据。
需要根据具体的场景和需求选择适合的方法来传递数据。
用vuex把两个数据分别储存到sessionStorage,localStorage中
可以在 Vuex 中定义两个模块,分别处理存储到 sessionStorage 和 localStorage 中的数据。
首先,在 `store.js` 中引入 `vuex` 和 `vuex-persistedstate`:
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
```
然后,定义两个模块 `sessionStorage` 和 `localStorage`:
```javascript
const sessionStorageModule = {
namespaced: true,
state: {
data: null
},
mutations: {
setData (state, data) {
state.data = data
}
},
plugins: [
createPersistedState({
storage: window.sessionStorage,
reducer: state => ({
data: state.data
})
})
]
}
const localStorageModule = {
namespaced: true,
state: {
data: null
},
mutations: {
setData (state, data) {
state.data = data
}
},
plugins: [
createPersistedState({
storage: window.localStorage,
reducer: state => ({
data: state.data
})
})
]
}
const store = new Vuex.Store({
modules: {
sessionStorage: sessionStorageModule,
localStorage: localStorageModule
}
})
export default store
```
这里使用了 `vuex-persistedstate` 插件来实现将数据持久化到 sessionStorage 和 localStorage 中。在定义模块时,通过 `plugins` 配置项将插件应用到模块上。`reducer` 函数指定了需要持久化的数据。
接下来,就可以在组件中通过 `mapMutations` 辅助函数来调用 mutations 了:
```javascript
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations('sessionStorage', ['setDataToSessionStorage']),
...mapMutations('localStorage', ['setDataToLocalStorage']),
saveData () {
// 保存数据到 sessionStorage 和 localStorage
this.setDataToSessionStorage(this.data)
this.setDataToLocalStorage(this.data)
}
}
}
```
以上代码中,通过 `mapMutations` 辅助函数将 `setData` mutation 映射为 `setDataToSessionStorage` 和 `setDataToLocalStorage` 方法,以便在组件中使用。在 `saveData` 方法中,调用这两个方法即可将数据保存到 sessionStorage 和 localStorage 中。