Session Storage(本地缓存) -- 飞机票项目

最新推荐文章于 2024-03-17 09:30:07 发布

Facing_the_Giants

最新推荐文章于 2024-03-17 09:30:07 发布

阅读量688

点赞数

分类专栏： web前端文章标签： session

本文链接：https://blog.csdn.net/Facing_the_Giants/article/details/78317995

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

大家好！我是杨小宝，之前写过一篇 Local Storage ，今天给大家介绍一下Session Storage

区别：

    Local Storage 删除数据需要手动删除
    Session Storage 删除数据关闭浏览器即可
    （对于我们现在的需求而言，如需了解深层知识，可以去百度查看文档）

用法：

            var storage= window.sessionStorage;

    储存数据：storage.setItem('data','123456789');
    获取数据：storage.getItem('data');
    删除数据：storage.removeItem('data');

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="box">
        <div>
            数据：<p>{{json}}</p>
        </div>
        <button @click='set'>储存数据</button>
        <button @click='get'>获取数据</button>
        <button @click='remove'>删除数据</button>
    </div>
</body>
<script type="text/javascript">
    let vm = new Vue({
        el:'#box',
        data:{
            json:{
                name:'杨小宝',
                age:18
            }
        },
        methods:{
            set(){
                var storage = window.sessionStorage;
                storage.setItem('data',JSON.stringify(this.json)) 
            },
            get(){
                var storage = window.sessionStorage;
                storage.getItem('data')
                console.log(JSON.parse(storage.getItem('data')))
            },
            remove(){
                var storage = window.sessionStorage;
                storage.removeItem('data')
            }
        },
        mounted(){
            if (!window.sessionStorage) {
                alert('浏览器不支持sessionStorage')
            }
        }
    })
</script>
</html>

注意：

    1.储存JSON类型的时候，要把json格式转换为 字符串格式。获取数据在转成json格式就可以了。
    2.关闭浏览器本地缓存数据自动清空。
    3.尽量不要储存太多数据，限制大概5MB(具体的我也没试过)

在天天加班的高强度下，飞机票项目基本结束了！开始整理知识点！下一章，过滤数据以及数组去重。

感谢您的阅读！

Facing_the_Giants

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Session Storage(本地缓存) -- 飞机票项目

大家好！我是杨小宝，之前写过一篇 Local Storage ，今天给大家介绍一下Session Storage区别： Local Storage 删除数据需要手动删除 Session Storage 删除数据关闭浏览器即可（对于我们现在的需求而言，如需了解深层知识，可以去百度查看文档）用法： var storage= win
复制链接

扫一扫