[JavaScript] 本地存储(sessionStorage与localStorage)_js storage存储在哪一层-程序员宅基地

技术标签: html  javascript  css3  

小案例:
请添加图片描述
在这个登录注册页面案例里,我们并没有连接数据库而是用到了本地存储这个知识点完成的,我们看看本地存储究竟是什么:

本地存储特性

  1. 数据存储在用户浏览器中
  2. 设置、读取方便、甚至页面刷新不丢失数据
  3. 容量较大, sessionStorage约5M、localStorage约20M .
  4. 只能存储字符串,可以将对象JSON.stringify()编码后存储

window.sessionStorage

特点

  1. 生命周期为关闭浏览器窗口
  2. 在同一个窗口(页面)下数据可以共享
  3. 以键值对的形式存储使用

使用

存储数据:

sessionStorage.setItem(key,value)

获取数据:

sessionStorage.getItem(key)

删除数据:

sessionStorage.removeItem(key)

删除所有数据:

sessionStorage.clear()

在浏览器里点击这个按钮点Application就能看到我们存储的数据
在这里插入图片描述
就存储在Storage下,sessionStorage与localStorage存储的数据是分开的
在这里插入图片描述

例子


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        console.log(localStorage.getItem('username'));

        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
      
            // 当我们点击了之后,就可以把表单里面的值存储起来
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
      
            // 当我们点击了之后,就可以把表单里面的值获取过来
            console.log(sessionStorage.getItem('uname'));

        });
        remove.addEventListener('click', function() {
      
            // 
            sessionStorage.removeItem('uname');

        });
        del.addEventListener('click', function() {
      
            // 当我们点击了之后,清除所有的
            sessionStorage.clear();

        });
    </script>
</body>

</html>

但我们单击第一个存储数据的按钮后,我们输入的数据‘ wwww '会被存储在变量 val 里,然后通过键值对的形式存储到浏览器里,我们可以在右边的Application看到存储的键值对
在这里插入图片描述

window.IocalStorage

特点

  1. 生命周期永久生效,除非手动删除否则关闭页面也会存在
  2. 可以多窗口(页面)共享(同一浏览器可以共享)
  3. 以键值对的形式存储使用

使用

存储数据:

localStoragesetItem(key,value)

获取数据:

localStorage.getItem(key)

删除数据:

localStorage.removeItem(key)

删除所有数据:

localStorage.clear()

IocalStorage的应用方式和sessionStorage一样只不过IocalStorage生命周期永久生效就算把浏览器关掉了,下次打开数据还会在,这就是它最突出的特点

综合案例

请添加图片描述
有一个这样的登录注册页面,我们要实现像文章开头那样,可以保存注册的数据,然后判断登陆页面输入的用户名与密码和本地存储的数据是否一一对应。这个案例怎么应用刚刚学到的本地存储知识点完成呢?

思路:

我们可以声明一个数组,把在注册页面中输入的用户名都存储在数组里,让注册页面的用户名和密码通过本地存储存储在浏览器中。然后回到登陆页面,先判断输入的用户名是否在用户名数组里,如果是的话再在本地存储的数据中找到该用户名对应的密码,如果这个密码和我们在登陆页面输入的密码相同,就登陆成功了

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_49900295/article/details/123809417

智能推荐

JSX的基本使用_jsx 在什么环境中运行-程序员宅基地

文章浏览阅读577次。简介JSX是JavaScript XML的简写,表示在JavaScript代码中写XML格式的代码优点:声明式语法更加直观、与HTML结构相同,降低了学习成本,提升开发效率。为什么脚手架中可以使用JSX语法?1.JSX不是标准的ECMAScript语法,它是ECMASeript的语法拓展。2.需要使用babel编译处理后,才能在浏览器环境中使用3.create-react-app 脚手架中已经默认有该配置使用步骤1.使用JSX语法创建react元素const title_jsx 在什么环境中运行

Spring中Bean的生命周期详解_spring bean加载过程(简述bean的生命周期)-程序员宅基地

文章浏览阅读135次。Spring中Bean的生命周期详解Spring最重要的功能就是帮助程序员创建对象(也就是IOC),而启动Spring就是为创建Bean对象做准备,所以我们先明白Spring到底是怎么去创建Bean的,也就是先弄明白Bean的生命周期。Bean的生命周期就是指:在Spring中,一个Bean是如何生成的,如何销毁的?..._spring bean加载过程(简述bean的生命周期)

ps新手秒变大师必备的Ps插件全在这!(mac版本)_delicious retouch 5 mac-程序员宅基地

文章浏览阅读3k次。作为设计师Photoshop可谓神器,不论你是何种设计师多多少少都会用到它。随着时代的发展,对效率越来越注重,ps虽功能强大,但不是大神级别的炉火纯青,用起来还是比较浪费时间的,这是设计公司永远不会说的秘密。 今天专为使用Mac的同学们带来的是10款必备常用ps扩展插件合集!美工修图必备!1.Delicious Retouch 5.0 (DR5)白金版Delicious Retouch5 白金版 for mac(PS磨皮插件DR5)立即下载Delicious Retouch5 白金版 for mac_delicious retouch 5 mac

如何将图像从 React Native 上传到 Laravel API_react native launchimagelibrary 如何上传图片-程序员宅基地

文章浏览阅读410次。聚优影视TV双播盒子,内置多个资源接口,开源TVBOX制作!如今,开发人员同时处理前端和后端项目是很常见的。根据最近的一项开发人员调查,React Native 是全球最流行的用于构建跨平台移动应用程序的框架之一。Laravel 是一个 PHP Web 框架,具有优雅的代码结构,开发人员可以使用它来创建 REST API。Laravel 目前有71k 的 GitHub 星数,证明了它在开发者社区中的受欢迎程度。_react native launchimagelibrary 如何上传图片

sql函数--05---SQL----coalesce函数详解_sql coalesce-程序员宅基地

文章浏览阅读1.8k次,点赞4次,收藏5次。提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录coalesce函数背景:语法:COALESCE ( expression,value1,value2……,valuen)流程:举例:应用 1 :进行空值处理查询学生成绩,如果查不到,则赋值为0应用 2 :进行默认处理返回人员的“重要日期”if( , ,)函数也可以coalesce函数背景:主流数据库系统都支持COALESCE()函数, MYSQL、MSSQLServer、DB2、Oracle:这个函数主要用来进行空值处_sql coalesce

vue项目中 实现复制功能_vue 复制dom元素-程序员宅基地

文章浏览阅读1.5k次。vue使用插件vue 可使用 vue-clipboard 插件npm i vue-clipboard2 -S 安装插件在main.js 中引入import VueClipboard from ‘vue-clipboard2’Vue.use(VueClipboard)<el-input v-model="input" size="mini" placeholder="请输入内容"></el-input><el-button type="text" icon="_vue 复制dom元素

随便推点

轻轻松松制作与众不同的黑白照片_黑白照片自动生成-程序员宅基地

文章浏览阅读279次。无论摄影技术如何发展,黑白照片都能保持它独特的吸引力,但如果你亲手试过把彩色照片直接调成黑白照片,那你想必会发现,转换后的效果好像就是差了一点。不用担心,今天小编给大家推荐三款好用的黑白照片处理软件,操作简单,功能实用,让你轻轻松松就制作与众不同的黑白照片,快跟着小编一起来看看吧~1.PhotosRevive for mac(黑白照着色工具)PhotosRevive for mac(黑白照着色工具)立即下载PhotosRevive for mac(黑白照着色工具)Mac哪款黑白照着色工具好用呢?_黑白照片自动生成

LeetCode刷题Python Day1 Q35:搜索插入位置-程序员宅基地

文章浏览阅读96次。题目如下:35. 搜索插入位置难度简单1029收藏分享切换为英文接收动态反馈给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。请必须使用时间复杂度为O(log n)的算法。示例 1:输入: nums = [1,3,5,6], target = 5输出: 2示例2:输入: nums = [1,3,5,6], target = 2输出: 1示例 3:输入: nums = [1,3...

oracle 存储过程 带游标作为OUT参数输出_oracle存储过程 行变量入参-程序员宅基地

文章浏览阅读9.2k次。包中带过程 要自己定义一个type [cur_name] is ref cursor游标,返回的时候就直接 procedure AAA(变量名 out [cur_name])如此申明OUT变量 存储过程 用系统默认的 sys_refcursor 游标类型 定义变量就OK了 Sql代码 --PL/SQL Code (包中带过程) 过程带游标的OUT参数,返回游标(ref curs_oracle存储过程 行变量入参

AES-NI指令集-程序员宅基地

文章浏览阅读1.6k次。对于intel的AES-NI新指令集,需要i5处理器及以上的相关硬件支持.在编译时,可能会出现/usr/lib/gcc/x86_64-linux-gnu/4.8/include/wmmintrin.h:34:3: error: #error "AES/PCLMUL instructions not enabled"很显然,可以通过查其头文件,定位到#if !defined (__AES..._aes-ni指令集的下载与使用

Bug基础-程序员宅基地

文章浏览阅读131次。1.缺陷报告的定义软件不正常的错误或者是代码行错误等均衡成为缺陷2.缺陷的种类:功能不正常软件在使用上感觉不方便软件的结构未做良好规划提供的功能不充分与软件操作者的互动不良使用性能不佳未做好错误处理边界错误计算错误使用一段时间所产生的错误控制流程的错误在大数据量压力下所产生的错误在不同硬件环境下产生的错误版本控制不良导致的错误软件文档的错误3.将缺陷按照严重程度划分系统崩溃,严重,一般,次要,建议4.解决bug的优先级高,中,低5.按照测试种类分:逻辑功能类性_bug基础

macOS高端使用技巧_mac指标高级运用?-程序员宅基地

文章浏览阅读185次。Macos 的占有量不如 Windows,两者之间当操作方式也有很大的不同,当很多人熱悉 Windows 的操作之后,再接触 macos,觉得难上手,其实是习惯问题。如果你学习一些技巧,会觉得 macos 其实也不错,某些方面,甚至远远优于 Windows。很多人说 macos 这效率上会优于 Windows,这点必须承认,毕竟 macos 包括其平台下的软件,有很多的快捷键,并且感觉苹果也有意让大家多多利用快捷键。那么多的快捷键,并且 control 和 command 在使用上,没有一定的规律可循,导_mac指标高级运用?

推荐文章

热门文章

相关标签