学习localStorage和sessionStorage

2 years ago · f6cd81e2a2
parent 5d70cfff63
commit f6cd81e2a2
2 changed files with 68 additions and 0 deletions
--- a/20_脚手架/vue_code/08.浏览器本地存储/localStorage.html
+++ b/20_脚手架/vue_code/08.浏览器本地存储/localStorage.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>localStorage</title>
+</head>
+<body>
+    <h2>localStorage</h2>
+    <button onclick="saveData()">点击保存一个数据</button><br/>
+    <button onclick="readData()">点击读取一个数据</button><br/>
+    <button onclick="deleteData()">点击删除一个数据</button><br/>
+    <button onclick="deleteAllData()">点击清空数据</button><br/>
+    <script type="text/javascript">
+        let p = {name:'测试' , age:18}
+        function saveData() {
+            localStorage.setItem('msg', 'Hello!!')
+            localStorage.setItem('msg2', 666)
+            localStorage.setItem('person', JSON.stringify(p))
+        }
+        function readData() {
+            console.log(localStorage.getItem('msg'))
+            console.log(localStorage.getItem('msg2'))
+            console.log(JSON.parse(localStorage.getItem('person')))
+            console.log(localStorage.getItem('msg3'))
+        }
+        function deleteData() {
+            localStorage.removeItem('msg')
+        }
+        function deleteAllData() {
+            localStorage.clear()
+        }
+    </script>
+</body>
+</html>
--- a/20_脚手架/vue_code/08.浏览器本地存储/sessionStorage.html
+++ b/20_脚手架/vue_code/08.浏览器本地存储/sessionStorage.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>sessionStorage</title>
+</head>
+<body>
+<h2>sessionStorage</h2>
+<button onclick="saveData()">点击保存一个数据</button><br/>
+<button onclick="readData()">点击读取一个数据</button><br/>
+<button onclick="deleteData()">点击删除一个数据</button><br/>
+<button onclick="deleteAllData()">点击清空数据</button><br/>
+<script type="text/javascript">
+    let p = {name:'测试' , age:18}
+    function saveData() {
+        sessionStorage.setItem('msg', 'Hello!!')
+        sessionStorage.setItem('msg2', 666)
+        sessionStorage.setItem('person', JSON.stringify(p))
+    }
+    function readData() {
+        console.log(sessionStorage.getItem('msg'))
+        console.log(sessionStorage.getItem('msg2'))
+        console.log(JSON.parse(sessionStorage.getItem('person')))
+        console.log(sessionStorage.getItem('msg3'))
+    }
+    function deleteData() {
+        sessionStorage.removeItem('msg')
+    }
+    function deleteAllData() {
+        sessionStorage.clear()
+    }
+</script>
+</body>
+</html>