原生js如何实现保存功能?
时间: 2024-01-18 08:01:52 浏览: 24
原生JS可以使用浏览器自带的localStorage或sessionStorage对象来实现保存功能。
1. 使用localStorage保存数据:
localStorage.setItem(key, value):将value存储到key中。
localStorage.getItem(key):获取key存储的value。
localStorage.removeItem(key):删除key存储的value。
localStorage.clear():清空localStorage中的所有数据。
示例:
```javascript
//保存数据
localStorage.setItem("username", "张三");
localStorage.setItem("age", "18");
//获取数据
var username = localStorage.getItem("username");
var age = localStorage.getItem("age");
//删除数据
localStorage.removeItem("age");
//清空所有数据
localStorage.clear();
```
2. 使用sessionStorage保存数据:
sessionStorage的使用方法与localStorage相同,但它只会在当前会话中保存数据,当会话结束时数据也会被清除。
示例:
```javascript
//保存数据
sessionStorage.setItem("username", "张三");
sessionStorage.setItem("age", "18");
//获取数据
var username = sessionStorage.getItem("username");
var age = sessionStorage.getItem("age");
//删除数据
sessionStorage.removeItem("age");
//清空所有数据
sessionStorage.clear();
```