css3/html5之本地储存----storage

最新推荐文章于 2023-03-25 15:12:32 发布

Cc.＇沐艿伊℡

最新推荐文章于 2023-03-25 15:12:32 发布

阅读量772

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_44899153/article/details/93533642

版权

web 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

//1.临时储存

关闭浏览器就会被清除
通过设置的key值来存储数据

1.1存数据

`sessionStorage.setItem("list", "张三");` 
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190624222021593.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODk5MTUz,size_16,color_FFFFFF,t_70)
`sessionStorage.setItem("list", "张三,李四");`
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190624222046353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODk5MTUz,size_16,color_FFFFFF,t_70)

1.2取数据

  //取
    console.log(sessionStorage.getItem("list"));

在这里插入图片描述

1.3删数据

    //删除
    sessionStorage.removeItem("list");

在这里插入图片描述

 //只想删除张三这个数据
    sessionStorage.setItem("list", "李四");

在这里插入图片描述

//2.永久储存

2.1存数据

localStorage.setItem("key","小明");

在这里插入图片描述

2.2删数据

//删除
    localStorage.setItem("key","");
    localStorage.removeItem("key");

在这里插入图片描述

//3.永久储存的案例

效果:
① : 不允许出现重复的历史数据,如果输入重复记录,则把重复记录加入到历史记录里,并删掉之前已经存在的重复值
② : 把新数据添加到前置位
③ : 最多出现十条历史数据, 如超过一条, 则删除最旧的数据
④点击按钮存记录
⑤点击删除,删掉对应的记录
⑥点击全部删除,清除所有历史记录

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>历史记录</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin-left: 300px;
        }
        ul{
            list-style: none;
        }
        ul li,div{
            width: 250px;
            padding: 10px 0;
            margin-left: 10px;
            border-bottom: 1px dashed #ccc;
            height: 20px;
        }
        a{
            float: right;
        }
        input{
            padding: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
<input type="search" id="txt" placeholder="输入搜索关键字"/>
<input type="button" id="btn" value="搜索"/>
<div><a id="clear" href="javascript:;">清空搜索记录</a></div>
<ul>
    <li>没有搜索记录</li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
</ul>
<script src="js/jquery.min.js"></script>
<script>
    //1.先取历史记录----自己预设一个key值,通过这个值来取
    var historyList=localStorage.getItem("list")||"[]";//有历史记录则或取历史记录,没有则为字符串"[]"
    console.log(historyList);//取不到为null,可以让他为默认的空数组,有值时,是string类型,需要转化为json对象
    var listArr=JSON.parse(historyList);
    console.log(listArr);
    //添加记录的函数
   function  render(){
       var html="";
       $(listArr).each(function(index,item){
           //创建li
           html+="<li><span>"+item+"</span><a data-index='"+index+"' href=\"javascript:;\">删除</a></li>";
           $("ul").html(html);
       })
       //如果没有历史记录,则显示没有搜索记录
       if(listArr==""){
           html="<li>没有搜索记录</li>";
           $("ul").html(html);
       }
   }
   // 初始化历史记录
    render();
    //2.点击存记录
    $("#btn").click(function(){
        var key=$("#txt").val();//获取输入框的输入的内容
        //判断输入框是否有值
        if(!key)return;
        var index=listArr.indexOf(key);
        if(index!=-1){
            listArr.splice(index,1);
        }
        listArr.unshift(key);
        //如果历史记录超过十个就删除最老的那个
        if($("li").length==10){
            listArr.pop($("li")[9]);
        }
        localStorage.setItem("list",JSON.stringify(listArr));
        $("#txt").val("");
        render();
    })
    //3.点击删除对应的历史记录
    $("ul").on("click",'a',function(){
        var index=$(this).data("index");
        listArr.splice(index,1);
        localStorage.setItem("list",JSON.stringify(listArr));
        render();
    })
    //4.点击清空历史记录
    $("#clear").click(function(){
        listArr=[];
        localStorage.setItem("list",JSON.stringify(listArr));
        render();
    })
</script>
</body>
</html>

效果图
在这里插入图片描述

Cc.＇沐艿伊℡

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css3/html5之本地储存----storage

//1.临时储存通过设置的key值来存储数据1.1存数据`sessionStorage.setItem("list", "张三");` ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190624222021593.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10...
复制链接

扫一扫