js中sessionStorage和localStorage的用法及案例
时间: 2023-07-26 10:42:01 浏览: 54
sessionStorage和localStorage都是HTML5中新增的Web存储API,用于在浏览器端存储数据。
sessionStorage用于在当前浏览器窗口关闭前存储数据,而localStorage则可以长期存储数据,即使浏览器关闭也不会清除。
它们的用法非常简单,都是通过getItem、setItem、removeItem等方法来操作数据。
下面是一个简单的案例:
```javascript
// 存储数据到sessionStorage中
sessionStorage.setItem('name', 'Tom');
sessionStorage.setItem('age', '18');
// 从sessionStorage中获取数据
const name = sessionStorage.getItem('name');
const age = sessionStorage.getItem('age');
console.log(name, age); // Tom, 18
// 从sessionStorage中删除数据
sessionStorage.removeItem('name');
// 清空sessionStorage中所有数据
sessionStorage.clear();
// 存储数据到localStorage中
localStorage.setItem('name', 'Jerry');
localStorage.setItem('age', '20');
// 从localStorage中获取数据
const name = localStorage.getItem('name');
const age = localStorage.getItem('age');
console.log(name, age); // Jerry, 20
// 从localStorage中删除数据
localStorage.removeItem('name');
// 清空localStorage中所有数据
localStorage.clear();
```
注意,sessionStorage和localStorage只能存储字符串类型的数据,如果需要存储其他类型的数据,需要先将其转化为字符串类型再存储。