Vue的浏览器中的 webStorage

* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。
* @author Alan
* @Email no008@foxmail.com

Vue的浏览器中的 webStorage

正文

Vue的浏览器中的 webStorage

1：Api介绍

/*
webStorage
存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

相关API：

xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

xxxxxStorage.getItem('person');

 该方法接受一个键名作为参数，返回键名对应的值。

xxxxxStorage.removeItem('key');

 该方法接受一个键名作为参数，并把该键名从存储中删除。

xxxxxStorage.clear()

 该方法会清空存储中的所有数据。

备注：

SessionStorage存储的内容会随着浏览器窗口关闭而消失。
LocalStorage存储的内容，需要手动清除才会消失。
xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
JSON.parse(null)的结果依然是null。

*/

2：示例代码

localStorage.html

<!DOCTYPE html>
<lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>localStorage</title>
    </head>

    <body>
        <h2>localStorage</h2>
        <button onclick="saveData()">保存一个数据入localStorage</button><br/><br/>
        <button onclick="readData()">读取一个数据入localStorage</button><br/><br/>
        <button onclick="delData()">删除一个数据入localStorage</button><br/><br/>
        <button onclick="clearData()">清空localStorage</button><br/><br/>
    </body>

    <script type="text/javascript">
        let p ={name:'李四',age:18};


        function saveData() {
             localStorage.setItem('msg','Hello!');
             localStorage.setItem('msg2',6666);
             localStorage.setItem('person',JSON.stringify(p));
        }
        function readData() {
            console.log(localStorage.getItem('msg'));
            console.log(localStorage.getItem('msg2'));
            console.log(localStorage.getItem('msg3'));
            console.log(JSON.parse(localStorage.getItem('person')));
        }
        function delData() {
            localStorage.removeItem('msg');
            localStorage.removeItem('msg2');
            localStorage.removeItem('person');
        }
        function clearData(){
            localStorage.clear();
        }
    </script>

    </html>

sessionStorage.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sessionStorage</title>
</head>

<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">保存一个数据入sessionStorage</button><br /><br />
    <button onclick="readData()">读取一个数据入sessionStorage</button><br /><br />
    <button onclick="delData()">删除一个数据入sessionStorage</button><br /><br />
    <button onclick="clearData()">清空sessionStorage</button><br /><br />
</body>
<script type="text/javascript">
    let p = { name: '李四', age: 18 };


    function saveData() {
        sessionStorage.setItem('msg', 'Hello!');
        sessionStorage.setItem('msg2', 6666);
        sessionStorage.setItem('person', JSON.stringify(p));
    }
    function readData() {
        console.log(sessionStorage.getItem('msg'));
        console.log(sessionStorage.getItem('msg2'));
        console.log(sessionStorage.getItem('msg3'));
        console.log(JSON.parse(sessionStorage.getItem('person')));
    }
    function delData() {
        sessionStorage.removeItem('msg');
        sessionStorage.removeItem('msg2');
        sessionStorage.removeItem('person');
    }
    function clearData() {
        sessionStorage.clear();
    }
</script>

</html>