本地储存临时储存`sessionStorage`/永久储存`localStorage`/利用本地储存进行登录界面和验证登录/单词查看表

01-本地存储-sessionStorage会话存储(临时)-存储数据:sessionStorage.setItem('名字','值')-取出数据:sessionStorage.getItem('名字')-删除数据:sessionStorage.removeItem('名字')-清除数据:sessionStorage.clear()

    <script>
        // sessionStorage:js中提供了这个对象专门操作Session Storage
        console.log(sessionStorage)

        // 1. 存储数据:sessionStorage.setItem('名字','值')
        // sessionStorage.setItem('name', '张三')
        // sessionStorage.setItem('age', 19)

        // // 2. 取出数据:sessionStorage.getItem('名字')
        // document.body.innerHTML += sessionStorage.getItem('name')

        // // 如果拿的东西不存在会怎么样?拿到null
        // document.body.innerHTML += sessionStorage.getItem('gun')

        // // 3. 删除数据:sessionStorage.removeItem('名字')
        // sessionStorage.removeItem('name')

        // 4. 清除数据:sessionStorage.clear()
        // sessionStorage.clear()

        // sessionStorage的特点
        // 只有自己的页面当前打开存的数据,自己能看到(其他页面,自己页面新开,都看不到)

        // 数据要求要安全:存到sessionStorage中(页面关闭就会丢失:保证数据的安全,不会被其他地方乱访问)

        // 本地存储都只能存储字符串数据(数字可以自动转),复杂数据类型(数组、对象)需要手动转成json格式
        let obj = { name: '张三', age: 19 }
        // sessionStorage.setItem('obj', obj)   // [object Object] 数据类型(转换后的),数据丢失了

        sessionStorage.setItem('obj', JSON.stringify(obj))
    </script>

注意:
1.只有自己的页面当前打开存的数据,自己能看到(其他页面,自己页面新开,都看不到)
2.数据要求要安全:存到sessionStorage中(页面关闭就会丢失:保证数据的安全,不会被其他地方乱访问)
3.本地存储都只能存储字符串数据(数字可以自动转),复杂数据类型(数组、对象)需要手动转成json格式
4.如果拿的东西不存在会怎么样?拿到null



02-本地存储-localStorage-永久存储

    <script>
        // localStorage:永久存储,使用的API跟sessionStorage一样的

        // 存:setItem()
        localStorage.setItem('name', '前端小白')
        // 只要不清理:一直存储

        // 清理方式:代码清理(程序员主动清理);浏览器清理:用户清理
        // 本地存储:sessionStorage和localStorage都不会存储重要的数据(不重要)

        // 查:getItem()
        document.body.innerHTML += localStorage.getItem('name')

        // 删:removeItem()
        localStorage.removeItem('name')

        // 本地存储可以跨页面访问:同一个网站
    </script>

注意:
1.localStorage:永久存储,使用的API跟sessionStorage一样的
2.清理方式:代码清理(程序员主动清理);浏览器清理:用户清理
3.本地存储:sessionStoragelocalStorage都不会存储重要的数据(不重要)



03-本地存储应用-登录页面案例

<body>
    用户名:<input type="text" name="username" class="un"><br>
    密码:<input type="password" name="password" class="pwd"><br>
    <button>登录</button>

    <script>
        // 需求:点击登录,获取用户信息,存入到永久存储,跳转到另外一个页面(location.assign())

        // 1. 获取事件源:button
        // 2. 事件类型:点击 onclick
        document.querySelector('button').onclick = function () {
            // 3. 事件处理
            // 3.1 获取数据
            let username = document.querySelector('.un').value
            let password = document.querySelector('.pwd').value
            // console.log(username, password)
            // 3.2 存入到localStorage
            let obj = {
                username: username,
                password: password
            }

            localStorage.setItem('userInfo', JSON.stringify(obj))

            // 3.3 跳转到其他页面
            location.assign('05-本地存储应用-验证登录.html')
        }

    </script>
</body>

04-本地存储应用-验证登录案例

    <script>
        // 验证用户数据

        // 1. 获取用户数据:localStorage : userInfo
        let userInfo = localStorage.getItem('userInfo')

        // 2. 数据拿到的是字符串:不能直接用,转换成js对象
        userInfo = JSON.parse(userInfo)
        console.log(userInfo)
        // 3. 验证:用户名必须是admin 密码必须是123456
        if (userInfo.username == 'admin' && userInfo.password == '123456') {
            // 3.1 成功:提示成功:输出欢迎语
            document.body.innerText = `你好,${userInfo.username},欢迎来到XXX`
        } else {
            // 3.2 失败:重新来一次,返回去
            alert('用户名或者密码错误,请重试')

            // 回去
            history.back()
        }


    </script>



05-本地存储应用-单词查看案例

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 20px;
        }

        .box {
            width: 800px;
            height: 60px;
            margin: 220px auto;
            position: relative;
        }

        #txt {
            width: 798px;
            height: 58px;
            border: 1px solid #ccc;
            font-size: 20px;
        }


        #keywords {
            position: absolute;
            top: 60px;
            left: 0;
            background-color: rgb(12, 255, 24);
            list-style: none;
            width: 798px;
            ;
        }

        li {
            line-height: 24px;
            cursor: pointer;
        }

        #description {
            /* display: none; */
            width: 798px;
            height: 200px;
            position: absolute;
            top: -210px;
            border: 1px dashed green;
        }

        .go {
            width: 100px;
            height: 40px;
            line-height: 40px;
            background-color: burlywood;
            box-shadow: cadetblue;
            position: absolute;
            text-align: center;
            left: 50px;
            top: 100px;
        }

        .go:hover {
            cursor: pointer;
            color: steelblue;
        }
    </style>
</head>

<body>
    <div class="go">
        单词存储
    </div>
    <div class="box">
        <div id="description"></div>
        <div class="top">
            <input type="text" id="txt" placeholder="请输入要检索的内容,可以是单词也可以是解释">
        </div>
        <ul id="keywords"></ul>
    </div>

    <script>
        // 需求:用户在输入框中输入关键字,去找数据匹配:数据在本地存储localStorage中存在:名字words
        // 数据格式:对象,由属性名(单词)和值(解释)组成,用户可以通过单词,也可以通过解释来查询数据

        // 查询效果:与百度搜索是一样的

        // 1. 获取事件源(输入框,ul,描述框)
        let des = document.querySelector('#description')
        let txt = document.querySelector('#txt')
        let ul = document.querySelector('#keywords')
        // 2. 给输入框添加oninput事件
        txt.oninput = function () {
            // 3. 事件处理
            // 3.1 清理原来匹配的历史数据:清空ul
            ul.innerHTML = ''
            // 3.2 获取用户输入的数据
            let value = txt.value
            // console.log(value)
            // 3.3 安全处理:用户输入的数据不能为空:为空就要结束
            if (value.length == 0) return

            // 3.4 获取数据:存储的单词:localStorage存储,名字叫words
            let words = localStorage.getItem('words')
            // console.log(words)

            // 3.5 验证是否存在数据:null就表示没有拿到:没有必要往下走,结束
            if (words == null) return

            // 3.6 拿到的数据一定是json字符串:需要转换成js对象
            words = JSON.parse(words)
            // console.log(words)

            // 3.7 遍历对象:for-in,取出来的是属性名(单词)
            for (let k in words) {
                // console.log(k, words[k])
                // 3.7.1 匹配:单词要匹配 || 解释也要匹配:indexOf()
                if (k.indexOf(value) != -1 || words[k].indexOf(value) != -1) {
                    // 3.7.2 匹配成功
                    // * 创建li
                    let li = document.createElement('li')
                    // * 添加内容
                    li.innerText = `${k}${words[k]}`
                    // * 放进ul中
                    ul.appendChild(li)
                    // * 鼠标移入事件
                    li.onmouseover = function () {
                        this.style.backgroundColor = '#eeeeee'
                    }
                    // * 鼠标移出事件
                    li.onmouseout = function () {
                        this.style.backgroundColor = ''
                    }
                    // * 鼠标点击事件:清空词条,放到描述框中,清空用户输入
                    li.onclick = function () {
                        des.innerText = li.innerText

                        ul.innerHTML = ''

                        txt.value = ''
                    }
                }

            }

        }

    </script>
</body>

</html>

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战&#xff0c;可谓是杀敌无数&#xff0c;见怪不怪了&#xff01;在某知识社交平台中&#xff0c;一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读&#xff0c;可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表&#xff1a;零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时&#xff0c;为空表。 在比较复杂的线性表中&#xff0c;一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言&#xff0c;按照其应用领域&#xff0c;可以粗略地分成三类。 有的语言是多面手&#xff0c;在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类&#xff0c;比如说 C&#xff0c;Java&#xff0c; Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后&#xff0c;该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情&#xff0c;很多情况下&#xff0c;他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言&#xff0c;首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图&#xff1a; 上码&#xff1a; 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况&#xff0c;重点关注在中国市场扮演重要角色的全球及本土铪生产商&#xff0c;呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外&#xff0c;针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…