H5本地存储与会话存储-希望清单

最新推荐文章于 2022-06-25 21:45:23 发布

weixin_45070265

最新推荐文章于 2022-06-25 21:45:23 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML/CSS javascript 文章标签： javascript html5 html css css3

本文链接：https://blog.youkuaiyun.com/weixin_45070265/article/details/108210025

javascript 同时被 2 个专栏收录

23 篇文章

订阅专栏

HTML/CSS

13 篇文章

订阅专栏

本文深入探讨HTML5中的Web存储技术，包括会话存储(sessionStorage)和本地存储(localStorage)的使用方法，生命周期，存储地址及大小。通过具体示例展示如何在网页应用中实现数据持久化存储。

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

本地存储与会话存储介绍

1.本地存储(localStorage)和会话存储(sessionStorage)是HTML5的Web存储提供的客户端存储技术.
2.会话存储(sessionStorage),顾名思义"对话过程中的数据", 数据是存在会话过程,会话结束数据也就销毁. 会话存储的生命周期从一个页面打开开始,到这个页面关闭结束.
会话存储中的主要方法:
①添加会话:sessionStorage.setItem(key,val)
或者 sessionStorage.key=val
②修改:sessionStorage.setItem(key,newVal)
或者 sessionStorage.key=newVal
③删除(根据key值删除):sessionStorage(key)
④清空数据(一般不使用):sessionStorage.clear()
生命周期:网页关闭生命结束
存储地址:浏览器的会话存储中
存储大小:5M左右
3.本地存储(localStorage), 数据保存在本地存储之后会一直存在,除非主动删除数据.
本地存储主要方法:
①添加会话:localStorage.setItem(key,val)
或者 localStorage.key=val
②修改:localStorage.setItem(key,newVal)
或者 localStorage.key=newVal
③删除(根据key值删除):localStorage(key)
④清空数据(一般不使用):localStorage.clear()
生命周期:一直存在,除非人为删除
存储地址:浏览器的本地存储中
存储大小:5M左右

本地存储应用-希望清单效果

在这里插入图片描述

HTML结构和css样式

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: rgb(235, 232, 232);
        }

        ul,
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        header {
            line-height: 50px;
            text-align: center;
            background-color: skyblue;
        }

        nav {
            line-height: 40px;
            text-align: center;
            background-color: #ccc;
        }

        nav a {
            display: inline-block;
            width: 100px;
            line-height: 30px;
            background-color: slategray;
            text-align: center;
            color: #fff;
            border-radius: 5px;
        }

        nav a.active {
            background-color: skyblue;
        }
        section{
            display: none;
        }
        section.on{
            display: block;
        }

        .form {
            padding: 10px;
        }

        .form label,
        input,
        button,
        textarea {
            width: 100%;
            outline: none;
        }
        textarea{
            padding: 5px;
        }
        .form button {
            line-height: 30px;
            margin-top: 10px;
            background-color: skyblue;
            border: 1px solid skyblue;
        }
        #list{
            padding: 10px;
        }
        #list li {
            overflow: hidden;
            margin-bottom: 5px;
        }

        #list li>p {
            float: left;
        }

        #list li>span,
        #list li>button {
            float: right;
        }
        #list li>button{
            width: 20px;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <header>
        <h1>愿望清单</h1>
    </header>
    <nav>
        <a href="#" class="active listBtn">任务列表</a>
        <a href="#" class=" addBtn">添加任务</a>
    </nav>
    <!-- 任务列表 -->
    <section class="on">
        <ul id="list">
            <!-- <li>
                <p>今天学习了h5的一些新特性</p>
                <button>x</button>
                <span>2020-08-06</span>
            </li> -->
        </ul>
    </section>
    <!-- 添加任务 -->
    <section class="form">
        <div>
            <p>
                <label for="content">内容</label>
            </p>
            <p>
                <textarea name="" id="content" cols="30" rows="2"></textarea>
            </p>
            <p>
                <label for="date">日期</label>
            </p>
            <p>
                <input type="date" id="date" >
            </p>
            <p>
                <button type="button" id="btn">提交</button>
            </p>
        </div>
    </section>
</body>

</html>

js

<script>
    let btn = document.querySelector('#btn')
    // 点击添加按钮添加任务
    btn.onclick = function () {
        // 获取内容和日期
        let conVal = content.value
        let dateVal = date.value
        let arr = null
        // 判断是否输入内容
        if (!(conVal && dateVal)) return false
        // 获取本地存储
        let todo = localStorage.getItem('todo')
        // 判断 是否有本地存储
        if (todo) {//存在
            // 字符串转为对象
            arr = JSON.parse(todo)
            // 追加数据,这里的i用来于删除按钮data-id属性值一一对应
            arr.push({ id: arr.length ,content: conVal, date: dateVal })
            // 转为字符串
            let str = JSON.stringify(arr)
            // 增加 
            localStorage.setItem('todo', str)
        } else {//不存在
            // 定义数组
            arr = [{ id : 0, content: conVal, date: dateVal }]
            // 转为字符串
            let str = JSON.stringify(arr)
            // 增加 
            localStorage.setItem('todo', str)
        }
        // 清空内容
        content.value = ''
        date.value = ''
        // 自动获取焦点
        content.focus()
        // 刷新
        history.go(0)
    }

    // 获取元素
    let listBtn = document.querySelector('nav .listBtn')//任务列表按钮
    let aDoms = document.querySelectorAll('nav>a')
    let sections = document.querySelectorAll('section')
    let list = document.getElementById('list')
    let form = document.querySelector('.form')//添加任务的表单
    let btnGroup = document.querySelectorAll('#list li>button')//任务列表中的删除按钮
    
    // 为任务列表和添加任务注册事件
    for(let i=0; i<aDoms.length; i++){
        aDoms[i].onclick=function(){
            for(let j=0; j<aDoms.length; j++){
                aDoms[j].classList.remove('active')
                sections[j].classList.remove('on')
                if(i==j){
                    aDoms[j].classList.add('active')
                    sections[j].classList.add('on')
                }
            }
            return false
        }
    }

    // 网页加载完成就显示所有任务
    window.onload=function(){
        // 获取本地存储
        let todo = localStorage.getItem('todo')
        if(!todo) return false
        // 转换为数组
        let arr = JSON.parse(todo)
        // 遍历数组拼接
        let html = ''
        for(let i=arr.length-1; i>=0; i--){
            html+=`
            <li>
            <p>${arr[i].content}</p>
            <button data-id="${i}">x</button>
            <span>${arr[i].date}</span>
            </li>
            `
        }
        // 渲染到页面
        list.innerHTML = html
    }

    // 删除功能
    list.addEventListener('click',function(event){
        if(event.target.nodeName==="BUTTON"){
            if(confirm('确定要删除该数据吗?')){
                // 获取按钮的自定义属性的值
                let index = event.target.dataset['id']
                // 获取本地存储
                let todo = localStorage.getItem('todo')
                let arr = JSON.parse(todo)
                // 删除数组中索引为index的数据
                arr.splice(index,1)
                localStorage.setItem('todo',JSON.stringify(arr))
                // 刷新
                history.go(0)
            }
        }
    })


</script>