学习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>