给我一个在sessionStorage存储状态的方法,例如在sessionStorage存一个status:true,,然后再给我一个从sessionStorage中删除status的方法
时间: 2024-03-14 16:41:29 浏览: 22
在JavaScript中,可以使用sessionStorage对象来在浏览器的会话期间存储数据。下面是一个示例,展示如何在sessionStorage中存储状态并删除状态:
1. 存储状态到sessionStorage中:
```javascript
sessionStorage.setItem('status', 'true');
```
这将在sessionStorage中创建一个名为"status"的键,并将其值设置为"true"。
2. 从sessionStorage中删除状态:
```javascript
sessionStorage.removeItem('status');
```
这将从sessionStorage中删除名为"status"的键及其对应的值。
请注意,sessionStorage中存储的数据仅在当前会话期间有效,当用户关闭浏览器标签或窗口时,数据将被清除。
相关问题
封装一个axios+vue3+ts的ajax请求
以下是一个基于Axios、Vue3和TypeScript的Ajax请求封装示例:
```
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
import { reactive } from 'vue';
interface ResponseData {
code: number;
message: string;
data: any;
}
interface AxiosResult<T> {
data: T | null;
error: string | null;
loading: boolean;
}
class AjaxService {
private instance: AxiosInstance;
constructor(baseURL: string) {
this.instance = axios.create({
baseURL,
timeout: 5000,
});
this.instance.interceptors.request.use(
(config: AxiosRequestConfig) => {
config.headers.Authorization = sessionStorage.getItem('token') || '';
return config;
},
(error: any) => {
console.error(error);
},
);
this.instance.interceptors.response.use(
(res: AxiosResponse<ResponseData>) => {
if (res.status === 200) {
if (res.data.code === 0) {
return res.data.data;
} else {
console.error(res.data.message);
return null;
}
} else {
console.error(res.status);
return null;
}
},
(error: any) => {
console.error(error);
return null;
},
);
}
public async get<T>(url: string, config?: AxiosRequestConfig): Promise<AxiosResult<T>> {
const result: AxiosResult<T> = reactive({
data: null,
error: null,
loading: true,
});
try {
const response = await this.instance.get(url, config);
result.data = response;
} catch (error) {
result.error = error;
} finally {
result.loading = false;
}
return result;
}
public async post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResult<T>> {
const result: AxiosResult<T> = reactive({
data: null,
error: null,
loading: true,
});
try {
const response = await this.instance.post(url, data, config);
result.data = response;
} catch (error) {
result.error = error;
} finally {
result.loading = false;
}
return result;
}
}
export default new AjaxService('https://example.com/api');
```
使用示例:
```
import ajax from './ajax-service';
const result = await ajax.get<User[]>('/users');
if (result.error) {
console.error(result.error);
} else if (result.data) {
console.log(result.data);
} else {
console.log('No data returned.');
}
```
</head> <body> <el-form id="login" class="demo-ruleForm" :rules="rules" :model="ruleForm"> <el-form-item label="用户名" prop="username"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="ruleForm.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="loginHandler()">登录</el-button> </el-form-item> </el-form> </body> <script> new Vue({ el: "#login", data() { return { ruleForm:{ username: "", password: "", }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } ], password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } ] } } }, methods: { loginHandler() { axios.post("http://localhost:9000/mvc_web/login?username="+this.ruleForm.username + "&password=" + this.ruleForm.password).then(function(response) { if(response.status==200){ if(response.data.id!=0){ //将数据保存在本地缓存中 /* window.localStorage.setItem("user",JSON.stringify(response.data)) */ //将数据保存到服务器中 sessionStorage.setItem("user",JSON.stringify(response.data)) window.location.href="home.html"} else{ console.log("账户或密码错误,请重新输入") } } }) .catch(function(error) { console.log(error) }) } } }) </script> </html> //Home.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="home"> 欢迎{{user.username}}登录 </div> </body> <script> new Vue({ el:"#home", data:{ user:JSON.parse(sessionStorage.getItem("user")) } }) </script> </html>解释每行代码
这段代码是一个基于Vue.js的前端页面,主要包含两个部分:一个是登录页面,另一个是主页。
在登录页面部分,代码中的el-form组件是一个表单组件,包含用户名和密码两个输入框以及登录按钮。其中,v-model指令用于实现数据的双向绑定,rules属性用于设置表单验证规则。loginHandler方法是登录按钮的点击事件处理函数,通过Axios库向服务器发送POST请求,将用户名和密码作为参数传递给后台,如果登录成功则将用户信息保存在sessionStorage中,跳转到主页;否则在控制台输出错误信息。
在主页部分,代码中的div元素用于展示欢迎信息,通过Vue.js实现数据的双向绑定,显示当前登录用户的用户名。其中,JSON.parse方法用于将sessionStorage中保存的JSON字符串转换为JavaScript对象,从而实现数据的获取和展示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)