cookie,localStrong,sessionStorage

最新推荐文章于 2024-07-04 12:09:39 发布

[Augenstern]

最新推荐文章于 2024-07-04 12:09:39 发布

阅读量319

点赞数

文章标签： javascript html5 前端

本文链接：https://blog.youkuaiyun.com/weixin_44627935/article/details/125125723

版权

本文探讨了在前端开发中如何跨页面传递值，重点介绍了cookie, localStorage和sessionStorage的区别，包括存储容量、有效期及删除方式。同时，解释了事件传播的概念，包括事件冒泡和事件捕获的工作原理。" 125466361,9354391,MATLAB二维和三维三角剖分详解,"['MATLAB', '算法', '开发语言']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、如何实现跨页面传值
1> a标签或者 location.href
2> 存储(cookie,localStorage,sessionStorage)
2、cookie,localStrong,sessionStorage的区别
1> cookie存储量小受到限制，设置过期时间删除，前后端自动同步；
2> localStorage存储量大，需手动删除
3> sessionStorage临时存储，关闭浏览器自动清除
3、冒泡与捕获
事件由子级传向父级，称之为事件冒泡
事件由父级传向子级，称之为事件捕获
(同一个事件父子级之间会进行传递，由子级传递给父级称之为冒泡，由父级传递给子级称之为捕获）

变清晰：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0，user-scalble=0">
    <title>变清晰</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,.wrap{
            width: 100vw;
            height: 100vh;
            background-image: url(https://img0.baidu.com/it/u=2829348807,3767759747&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499);
            background-size: cover;
            background-position: center center;
        }
        .wrap:nth-of-type(1){
            filter: blur(20px);
        }
        .wrap:nth-of-type(2){
            display: none;
        }
        .wrap{
            position: absolute;
            top: 0;
            left: 0;
        }
        .wrap.mask{
            display: block;
            -webkit-mask-image: -webkit-radial-gradient(#fff 65%, transparent 75%);
            -webkit-mask-size: 200px 200px;
            -webkit-mask-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
    <div class="wrap"></div>
</body>
<script>
    var d2 = document.querySelector('.wrap:nth-of-type(2)');
    window.ontouchstart = function(e){
        d2.classList.add('mask');
    }
    window.ontouchmove= function(e){
        var touch = e.touches[0];
        d2.style.webkitMaskPosition = `${touch.clientX-100}px ${touch.clientY-100}px`;
    }
    window.ontouchend = function(){
        d2.classList.remove('mask');
    }
</script>
</html>