Vue-41、浏览器本地存储

1、local storage

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <h1>localStorage</h1>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空所有数据</button>
<script type="text/javascript">
    let person = {name:'张仨',age:18};
    function saveData() {
        localStorage.setItem('msg','hello');
        localStorage.setItem('msg2',666);
        localStorage.setItem('person',JSON.stringify(person));
    }
    function readData() {
        console.log(localStorage.getItem('msg'));
        console.log(localStorage.getItem('msg2'));
        const result = localStorage.getItem('person');
        console.log(JSON.parse(result));
    }
    function deleteData() {
        localStorage.removeItem('msg');
        localStorage.removeItem('msg2');
        localStorage.removeItem('person');
    }
    function deleteAllData() {
        localStorage.clear();
    }
</script>
</body>
</html>

2、session storage

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sessionStorage</title>
</head>
<body>
<h1>localStorage</h1>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空所有数据</button>
<script type="text/javascript">
    let person = {name:'张仨',age:18};
    function saveData() {
        sessionStorage.setItem('msg','hello');
        sessionStorage.setItem('msg2',666);
        sessionStorage.setItem('person',JSON.stringify(person));
    }
    function readData() {
        console.log(sessionStorage.getItem('msg'));
        console.log(sessionStorage.getItem('msg2'));
        const result = sessionStorage.getItem('person');
        console.log(JSON.parse(result));
    }
    function deleteData() {
        sessionStorage.removeItem('msg');
        sessionStorage.removeItem('msg2');
        sessionStorage.removeItem('person');
    }
    function deleteAllData() {
        localStorage.clear();
    }
</script>
</body>
</html>

3、总结

相关推荐
Boilermaker199242 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构