web存储技术

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>

 

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

哆来A梦没有口袋

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值