【JavaScript】web存储

最新推荐文章于 2024-05-03 11:47:20 发布

学那些一学就会的编程

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量72

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_77198532/article/details/130414574

版权

HTML5 web 存储,一个比cookie更好的本地存储方式。使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。
(1)、localStorage 对象

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

下面的实例展示了用户点击按钮的次数。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
 
<body>
    <header id="he1">
        <div>
            <p id="divP"></p>
        </div>
        <p id="heP"></p>
    </header>
    <section class="sec">区间一</section>
    <section class="sec">区间二</section>
    <section class="sec">
        <aside id="as1">1</aside>
        <aside id="as2">2</aside>
        <aside id="as3">3</aside>
        <aside id="as4">4</aside>
        <div></div>
        <aside id="as5">5
            <div></div>
        </aside>
        <aside id="as6">
            <div>
                <div></div>
            </div>
        </aside>
 
 
    </section>
    <p class="sec">p1</p>
    <p id="p2">p2</p>
 
    <footer>底部</footer>
 
</body>
<script>
    // jQuery 的选择器：基础选择器、层级选择器、过滤选择器、筛选选择器（方法）
    // 一、基础选择器：id、类名、标签名、交集、并集
    console.log($("#he1"));
    $("#he1").css("font-style", "italic");
    console.log($(".sec"));
    $(".sec").css("font-weight", "bolder");
    console.log($("footer"));
    console.log($("p.sec"));
    $("p.sec").css("background-color", "red");
    console.log($("footer,#p2"));
    $("footer,#p2").css("text-decoration", "underline");
    // 二、层级选择器：子代、后代
    console.log($("header>p"));
    console.log($("header p"));
    // 三、过滤选择器：:eq/:even/:odd
    /*
        选择器A:eq(index)   获取到选择器A中，第index+1个选择器A元素
        选择器A:odd()   获取选择器A中索引号为奇数的元素
        选择器A:even()   获取选择器A中索引号为偶数的元素
    */
    $(".sec aside:eq(0)").css("background-color", "green");
    $("aside:odd()").css({
        "font-style": "italic",
        "font-weight": "bolder",
        "color": "pink"
    })
    $("aside:even()").css({
            "text-align": "center"
        })
        // 四、筛选选择器（方法）
        /*
          1、children(selector)：获取元素的指定选择器的儿子，如果没有选择器，获取全部儿子
          2、find(selector):获取元素的指定选择器的后代，必须加选择器
          3、siblings(selector)：获取元素的指定选择器的兄弟，如果没有选择器，获取全部的兄弟
          4、parent()；获取父元素
          5、parents()；获取所有祖先元素
          5、eq(index)：获取元素指定的索引的元素  ========:eq()
          6、next()下一个兄弟
          7、prev()上一个兄弟
          8、index()获取索引
          9、not(selector) 不是选择器为selector的元素
        */
    $(".sec").children("#as1").css("font-size", "60px");
    $(".sec").children().css("font-size", "60px");
    console.log($(".sec").find("div"));
    console.log($("#as2").siblings("div"));
    console.log($("#as2").parent());
    console.log($("#as2").parents());
    console.log($("aside").eq(1));
    console.log($("#as2").next());
    console.log($("#as2").prev());
    console.log($("#as2").index());
    console.log($("#as3").index());
 
    console.log($("#as4").index());
 
    console.log($("p").not("#divP"));
</script>
 
</html>

学那些一学就会的编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】web存储

但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。保存数据：localStorage.setItem(key,value);删除单个数据：localStorage.removeItem(key);得到某个索引的key：localStorage.key(index);
复制链接

扫一扫

【JavaScript】web存储

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