/**PageBeginHtml Block Begin **/ /***自定义返回顶部小火箭***/ /*生成博客目录的JS 开始*/ /*生成博客目录的JS 结束*/

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>







3：界面效果


image

posted @ 2022-12-14 22:30  一品堂.技术学习笔记  阅读(68)  评论(0)  编辑  收藏  举报