如何使用sessionStorage保存这个数据,给出示例代码
时间: 2023-07-26 16:10:06 浏览: 46
在JavaScript中使用`sessionStorage`保存数据非常简单,只需要使用`setItem()`方法将数据保存到`sessionStorage`中即可。示例代码如下:
```javascript
// 将数据保存到 sessionStorage 中
sessionStorage.setItem('data', JSON.stringify({name: '张三', age: 18}));
```
这里将一个包含姓名和年龄的对象保存到了`sessionStorage`中,使用了`JSON.stringify()`方法将对象转换为字符串。
如果要获取保存在`sessionStorage`中的数据,可以使用`getItem()`方法。示例代码如下:
```javascript
// 从 sessionStorage 中获取数据
let data = JSON.parse(sessionStorage.getItem('data'));
console.log(data.name); // 输出:张三
console.log(data.age); // 输出:18
```
这里使用了`JSON.parse()`方法将从`sessionStorage`中获取的字符串转换为对象,然后就可以访问对象中的属性了。
相关问题
使用sessionStorage存储写一个备忘录页面
sessionStorage是HTML5中提供的一种客户端存储数据的方法,数据只能在同一个浏览器窗口中共享。在备忘录页面中使用sessionStorage可以方便地存储用户输入的备忘内容,从而实现数据的持久化。以下是一个简单的备忘录页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>备忘录</title>
<style>
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 300px;
padding: 10px;
}
</style>
</head>
<body>
<h1>备忘录</h1>
<label>
标题:<br>
<input type="text" id="title">
</label>
<label>
内容:<br>
<textarea id="content"></textarea>
</label>
<button onclick="save()">保存</button>
<button onclick="clearAll()">清空</button>
<ul id="memoList"></ul>
<script>
// 加载已保存的备忘录
for (var i = 0; i < sessionStorage.length; i++) {
var key = sessionStorage.key(i);
if (key.indexOf("memo_") === 0) {
var memo = JSON.parse(sessionStorage.getItem(key));
addMemoToList(memo);
}
}
// 保存备忘录
function save() {
var title = document.getElementById("title").value;
var content = document.getElementById("content").value;
if (title.trim() === "") {
alert("请输入标题");
return;
}
if (content.trim() === "") {
alert("请输入内容");
return;
}
var id = "memo_" + new Date().getTime(); // 使用时间戳作为ID
var memo = {id: id, title: title, content: content};
sessionStorage.setItem(id, JSON.stringify(memo));
addMemoToList(memo);
document.getElementById("title").value = "";
document.getElementById("content").value = "";
}
// 清空所有备忘录
function clearAll() {
sessionStorage.clear();
document.getElementById("memoList").innerHTML = "";
}
// 将备忘录添加到列表中
function addMemoToList(memo) {
var li = document.createElement("li");
var a = document.createElement("a");
a.href = "#";
a.innerHTML = memo.title;
a.onclick = function() {
showMemo(memo);
return false;
};
li.appendChild(a);
document.getElementById("memoList").appendChild(li);
}
// 显示备忘录详细内容
function showMemo(memo) {
document.getElementById("title").value = memo.title;
document.getElementById("content").value = memo.content;
}
</script>
</body>
</html>
```
以上代码实现了一个简单的备忘录页面,用户输入标题和内容后,点击保存按钮可以将备忘录保存到sessionStorage中。同时,已保存的备忘录会显示在列表中,点击列表中的备忘录标题可以查看详细内容。清空按钮可以清空所有备忘录。
vue2中sessionStorage中的数据怎么更新
在Vue2中更新sessionStorage中的数据与更新普通的数据是类似的。您可以通过以下步骤来实现:
1. 在Vue组件中,使用$sessionStorage全局对象来获取sessionStorage中的数据。
2. 对sessionStorage中的数据进行修改。
3. 将修改后的数据重新保存回sessionStorage中。
以下是一个示例代码:
```
// 获取sessionStorage中的数据
let data = JSON.parse(window.sessionStorage.getItem('data'))
// 修改数据
data.name = 'newName'
// 将修改后的数据保存回sessionStorage中
window.sessionStorage.setItem('data', JSON.stringify(data))
```
另外,您还可以使用Vue插件vue-session来方便地操作sessionStorage。该插件提供了$session对象,您可以直接使用该对象来获取和修改sessionStorage中的数据。您可以在Vue组件中通过以下方式来使用vue-session插件:
```
import VueSession from 'vue-session'
Vue.use(VueSession)
// 获取sessionStorage中的数据
let data = this.$session.get('data')
// 修改数据
data.name = 'newName'
// 将修改后的数据保存回sessionStorage中
this.$session.set('data', data)
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)