JS之localStorage实战

最新推荐文章于 2022-04-09 20:59:51 发布

东方求败、

最新推荐文章于 2022-04-09 20:59:51 发布

阅读量242

点赞数

分类专栏： javascript复习之路 # javascript基础文章标签： javascript html5 html

本文链接：https://blog.csdn.net/wang_swa99er/article/details/120704573

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

这篇博客通过JavaScript的localStorage功能，展示了如何在用户关闭网页后仍能保持滑动条的进度。代码示例中，当滑动条移动时，实时更新localStorage中的值，以便下次打开页面时滑动条位置保持不变。涉及的关键技术包括DOM操作、事件监听以及浏览器的本地存储API。

摘要由CSDN通过智能技术生成

JS之localStorage实战

目标：用localStorage记录下滑动条的进度，下次打开不变

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #slide{position: relative;width: 600px;height: 30px;border: 1px solid black;margin: 100px auto;}
            #block{width: 30px; height: 30px; background-color: blue;position: absolute;left: 0;}
            #full{width: 0px;height: 30px;background-color: orange;position: absolute;top: 0px;left: 0px;}
        </style>
        <script>
            window.onload = function(){
                var oSlide = document.getElementById("slide");
                var oFull = document.getElementById("full");
                var oBlock = document.getElementById("block");

                if(!window.localStorage){
                            alert("该浏览器不支持！");
                        }else{
                            var l = localStorage.getItem("slide") ? localStorage.getItem("slide") : 0;
                            oBlock.style.left = l + 'px';
                            oFull.style.width = l + 'px';
                        }

                oBlock.onmousedown = function(ev){
                    var e = ev || window.event;
                    var offestX = e.clientX - oBlock.offsetLeft;

                    document.onmousemove = function(ev){
                        var e = ev || window.event;
                        l = e.clientX - offestX;
                        if(l <= 0){
                            l = 0;
                        }
                        if(l >= 570)
                        {
                            l = 570;
                        }
                        oBlock.style.left = l + 'px';

                        //填充部分要跟随滑块填充
                        oFull.style.width = l + 'px';
                        //对当前滑块的位置，进行本地存储
                        if(!window.localStorage){
                            alert("该浏览器不支持！");
                        }else{
                            localStorage.setItem("slide",l);
                        }
                    }
                }
                document.onmouseup = function(){
                    document.onmousemove = null;
                }
            }
        </script>
    </head>
    <body>
        <div id = 'slide'>
            <div id = 'full'></div>
            <div id = 'block'></div>
        </div>
    </body>
</html>