web存储技术

最新推荐文章于 2022-07-04 14:20:39 发布

哆来A梦没有口袋

最新推荐文章于 2022-07-04 14:20:39 发布

阅读量508

点赞数

分类专栏： web前端文章标签： web存储技术本地存储 localStorage与seesionStorage的区别 cookie

本文链接：https://blog.csdn.net/qq_42625428/article/details/103264536

版权

web前端专栏收录该内容

68 篇文章 4 订阅

订阅专栏

1.什么是web存储技术？

随着Web应用的发展，数据存储不在单一的存储在后台的数据库中(mongoDB,mysql,oracle)。客户端（浏览器）存储的用途也越来越来，最经典的就是“记住用户名”，实现客户端存储的方式有很多种，比如cookie(通用),flash(插件),userData(ie),globalStroage（firefox）。

2.有哪些web存储技术？

1.Cookie http无状态 - 服务器不知道是谁发的通信- 不知道是不是上一个人，Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，
就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，
浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。

存在形式：字符串类型-'key=value;key=value;...'
容量：4kb
每次浏览器发送请求会带上cookie信息 - 不安全

2.sessionStorage 会话级存储

生命周期：页面打开到页面关闭 - 是一个临时存储的地方

注意：存储的数据一定是一个字符串，因此存储时常用JSON.stringify(obj)在进行存储

使用：存储 sessionStorage .setItem("数据的变量名"，存储的数据)

获取 sessionStorage .getItem("数据的变量名")

删除 sessionStorage .removeItem("数据的变量名")

清楚所有 sessionStorage .clear()

3 localStorage 本地存储

生命周期：永久存储，除非进行手动删除

使用：存储 localStorage .setItem("数据的变量名"，存储的数据)

获取 localStorage .getItem("数据的变量名")

删除 localStorage .removeItem("数据的变量名")

清楚所有 localStorage .clear()

3.存储技术的实例 - 任务清单

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrap {
            width: 420px;
            height: 550px;
            background: pink;
            margin: 50px auto;
        }

        h2 {
            height: 55px;
            line-height: 55px;
            text-align: center;
        }

        #title {
            height: 45px;
            background: gray;
        }

        .showList,
        .addTask {
            display: inline-block;
            width: 49%;
            text-align: center;
            height: 45px;
            line-height: 45px;
        }

        span:hover {
            cursor: pointer;
        }

        .active {
            color: white;
        }

        .taskList {
            display: none;
            width: 100%;
            height: 400px;
            /* background: salmon; */
        }

        .add {
            padding-left: 15px;
            padding-top: 25px;
            width: 100%;
            height: 300px;
            /* background: fuchsia; */
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 400px;
            /* background: salmon; */
        }

        .time,
        .task {
            display: inline-block;
            width: 35%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /* background: cadetblue; */
        }

        .delete {
            cursor: pointer;
            width: 45px;
            height: 25px;
            margin-left: 50px;
        }

        .Nowtask {
            height: 23px;
        }

        .date {
            width: 157px;
            height: 23px;
        }

        .toAdd {
            margin-left: 88px;
            width: 76px;
            height: 27px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <h2>希望清单</h2>
        <div id="title">
            <span class="showList" data-title="taskList">任务列表</span>
            <span class="addTask active" data-title="add">添加任务</span>
        </div>
        <div id='show'>
            <!-- 任务列表 -->
            <div class="taskList">
                <ul>
                </ul>
            </div>

            <!-- 添加任务 -->
            <div class="add">
                任务：<input type="text" name="" id="" class="Nowtask"><br><br>
                日期：<input type="date" name="" id="" class="date"><br><br>
                <button class="toAdd">添加</button>
            </div>

        </div>
    </div>

    <script src="./jquery.min.js"></script>
    <script>
        //加载列表项
        showTask();  

        //点击切换 - 切换对应界面和当前字体颜色
        $('#title>span').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            let value = $(this).data('title');
            $('#show>div').hide();
            $(`.${value}`).show();
        })


        //提交进行存储
        $('.toAdd').click(function () {
            //获取值
            let task = $('.Nowtask').val();
            let date = $('.date').val();
            let obj = {
                task: task,
                date: date
            }
            //获取存储的数据并转为数组
            let taskList = JSON.parse(localStorage.getItem('taskList')) || [];
            taskList.push(obj);
            //重新进行保存数据
            localStorage.setItem('taskList', JSON.stringify(taskList));

            //将数据显示在列表项
            $('.taskList').show().siblings().hide();
            $('.showList').addClass('active').siblings().removeClass('active')
            //获取保存数据进行显示
            showTask();

        });

       //渲染数据
        function showTask() {
            let allTask = JSON.parse(localStorage.getItem('taskList')) || [];
            //遍历添加数据
            let html = '';
            allTask.forEach(function (v, i) {
                html += ` <li>
                        <span class="time">${v.date}</span>
                        <span class="task">${v.task}</span>
                        <button class="delete" data-index ='${i}'>删除</button>
                    </li>`
            });
            $('ul').html('');
            //将数据进行渲染界面
            $('ul').append(html);
        }


       //利用委托事件制作删除
        $('ul').on('click','.delete',function(){
            let allTask = JSON.parse(localStorage.getItem('taskList')) || [];
            let index = $(this).data('index');
            console.log(index)
            allTask.splice(index,1);
            localStorage.setItem('taskList', JSON.stringify(allTask));
            showTask();
        })


    </script>
</body>

</html>

哆来A梦没有口袋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web存储技术

1.什么是web存储技术？随着Web应用的发展，数据存储不在单一的存储在后台的数据库中(mongoDB,mysql,oracle)。客户端（浏览器）存储的用途也越来越来，最经典的就是“记住用户名”，实现客户端存储的方式有很多种，比如cookie(通用),flash(插件),userData(ie),globalStroage（firefox）。2.有哪些web存储技术？...
复制链接

扫一扫

专栏目录