JavaScript本地存储实现用户名存储案例

目录
  • 一、本地存储
    • 1.1 本地存储特性
    • 1.2 window.sessionStorage
    • 1.3 window.localStorage
  • 用户名存储案例

一、本地存储

1.1 本地存储特性

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

1.2 window.sessionStorage

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

设置数据

sessionStorage.setItem(key, value)

获取数据

sessionStorage.getItem(key)

删除数据

sessionStorage.removeItem(key)

清空数据

sessionStorage.clear()

练习:

    <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>

1.3 window.localStorage

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

存储数据

localStorage.setItem(key, value)

获取数据

localStorage.getItem(key)

删除数据

localStorage.removeItem(key)

清除所有数据

localStorage.clear()

练习:

    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        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;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));
        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');
        })
        del.addEventListener('click', function() {
            localStorage.clear();

        })
    </script>

用户名存储案例

如果勾选记住用户名,下次用户打开浏览器,就在文本框里面自动显示上次登录的用户名

案例分析:

1、将数据存储到本地存储

2、关闭页面再打开也可以显示用户名,所以用到的是localStorage

3、打开页面需要先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框

4、当复选框发生改变的时候change事件

5、如果勾选,就存储,否则就移除

   <input type="text" name="username" id="username" value="" placeholder="请输入用户名"/>
   <input type="checkbox" id="rusername"> 记住用户名

   <script type="text/javascript">
        var username = document.querySelector('#username');
		var rusername = document.querySelector('#rusername');

		// 先判断用户是否需要记录数据 再让记录的数据显示再表单里面
		if(localStorage.getItem('username')){
			username.value=localStorage.getItem('username');
			rusername.checked = true;
		}
		// change改变时 发生  Checkbox选中和不选中时 发生
		rusername.addEventListener('change',function(){
			// console.log('改变了');
			// console.log(rusername.checked);
			if(this.checked){
				localStorage.setItem('username',username.value);
			}else{
				localStorage.removeItem('username');
			}
		})
	</script>

到此这篇关于JavaScript本地存储实现用户名存储案例的文章就介绍到这了,更多相关JavaScript本地存储 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS项目中对本地存储进行二次的封装的实现

    目录 前言 定义恒量的键名 下层实现 上层调用 总结 前言 平时在开发的中,发现身边同事在使用localStorage和sessionStorage的时候,喜欢在代码里面直接调用,举个的栗子: function login() { //...请求 const userInfo = {userId: 123, userName: '张三'} sessionStorage.setItem('userInfo', JSON.stringify(userInfo)) } function getUser

  • angularJs中json数据转换与本地存储的实例

    1.html:把json对象转换成json字符串 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <div ng-app="module" n

  • 基于js 本地存储(详解)

    在客户端运行的JS是不能操作用户电脑磁盘中的文件的(保护客户端运行的安全) 1.JS中的本地存储: 使用JS向浏览器的某一个位置中存储一些内容,浏览器即使关闭了,存储的信息也不会销毁,当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息 本地存储的方案: 传统: cookie:把信息存储到客户端的浏览器中(但是项目服务器端也是可以获取COOKIE的) session:把信息存储到服务器上的(服务器存储) HTML5:webStorage localStorage:永久存储在客户端的本地 s

  • JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    目录 前提知识 范例 示例1:将键值对提供给本地存储 示例2: 本地存储中设置键值对 示例3: 获取空值 示例 4:将数组存储在本地存储中 示例 5:从本地存储中获取数组 示例 6:从本地存储中获取数组? 示例 7:清除本地存储 示例 8:仅从本地存储中删除 Name1 键值对 会话存储 总结 我不会告诉你任何定义和概念,上车,读完这篇博客,你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识. 前提知识 请按照我以下的步骤来: 1.在任

  • JS实现本地存储信息的方法(基于localStorage与userData)

    本文实例讲述了JS实现本地存储信息的方法.分享给大家供大家参考,具体如下: WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的userData,Firefox下面的globalStorage,以及Flash的本地存储,除了Flash之外,其他的几个都有一些兼容性的问题. sessionStorage与localStorage Web Storage实际上由

  • js仿微博实现统计字符和本地存储功能

    随着移动设备和Web应用的普及,为了更好的便于用户的使用,对于网页或应用程序的用户体验要求就越来越高,确实是这样,作为用户更喜欢选择用户体验效果好的网站或应用程序,所以作为开发者的我们就需要开发出更人生化的应用程序了. 相信许多人有使用微博的经验,像微博这样的社交平台,好的用户体验就变得尤其重要了. 例如:我们在发微博时,文本框会实时地提示我们剩余字符数,这样人性化的提示方便了用户知道微博字数的限制,同时也限制了用户的输入字数. 有一句话我们要牢记在心的是:凡是输入,必有限制:凡是输入,必须校验

  • 分享8个JavaScript库可更好地处理本地存储

    我为当前项目测试了一些本地存储库.想知道他们有什么很棒的功能吗?继续阅读. Local Storage Bridge https://github.com/krasimir/lsbridge 如果你必须在同一个浏览器中从一个标签页发送消息到另一个标签页,你不必用艰难的方式.Local storage bridge在这里让任务变得更简单. 基本使用: // 发送 lsbridge.send('app.message.error', { error: 'Out of memory' }); // 监

  • JavaScript本地存储实现用户名存储案例

    目录 一.本地存储 1.1 本地存储特性 1.2 window.sessionStorage 1.3 window.localStorage 用户名存储案例 一.本地存储 1.1 本地存储特性 1.数据存储在用户浏览器中2.设置.读取方便.甚至页面刷新不丢失数据3.容量大,sessionStorage约5M.localStorage约20M4.只能存储字符串,可以将对象JSON.stringify()编码后存储 1.2 window.sessionStorage 1.生命周期为关闭浏览器窗口2.

  • JavaScript本地存储与会话存储的实现介绍

    目录 一.简单介绍 二.localStorage本地存储 三.sessionStorage会话存储 总结 一.简单介绍 本地存储和会话存储的目的,是将所输入的文件存入到浏览器中,在需要的时候,直接调用,但是本地存储和会话存储有着一定的区别,本地存储,在不主动删除的情况下,会一直保留在浏览器中,会话存储是,当前保存的内容,页面刷新还会保留在浏览器中,但是关闭页面在打开时,会发现没有数据了.这是他们两的用处和区别. 二.localStorage本地存储 如下代码 我们先给button一个监听事件,让

  • JavaScript实现基于Cookie的存储类实例

    本文实例讲述了JavaScript实现基于Cookie的存储类.分享给大家供大家参考.具体分析如下: 通过这个JS类,你可以象使用session一样使用cookie,非常简单了! /* * CookieStorage.js * 本类实现像localStorage和sessionStorage一样的存储API * 不同的是,它是基于HTTP Cookies实现的. */ function CookieStorage(maxage, path) { // 两个参数分别代表储存有效期和作用域 // 获

  • Golang实现多存储驱动设计SDK案例

    目录 支持功能 开发缘由 如何使用 安装 存储适配器 缓存适配器 编写自己的缓存或存储 压缩 前言: Gocache是一个基于Go语言编写的多存储驱动的缓存扩展组件.它为您带来了许多缓存数据的功能. 支持功能 多个缓存驱动存储:支持内存.redis或您自定义存储驱动. 支持如下功能: 链式缓存:使用具有优先级顺序的多个缓存(例如,内存然后回退到redis共享缓存). 可加载缓存:允许您调用回调函数将数据放回缓存中. 指标缓存,可让您存储有关缓存使用情况的指标(命中.未命中.设置成功.设置错误……

  • JavaScript本地储存:localStorage、sessionStorage、cookie的使用

    javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookier 1. sessionStorage sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除: setItem(key,value) 设置数据 getItem(key) 获取数据 removeItem(key) 移除数据 clear() 清除所有值 <script> // 添加数据 window.sessionStorage.setItem("na

  • Android基础教程数据存储之文件存储

    Android基础教程数据存储之文件存储 将数据存储到文件中并读取数据 1.新建FilePersistenceTest项目,并修改activity_main.xml中的代码,如下:(只加入了EditText,用于输入文本内容,不管输入什么按下back键就丢失,我们要做的是数据被回收之前,将它存储在文件中) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="

  • Android App将数据写入内部存储和外部存储的示例

    File存储(内部存储) 一旦程序在设备安装后,data/data/包名/ 即为内部存储空间,对外保密. Context提供了2个方法来打开输入.输出流 FileInputStream openFileInput(String name) FileOutputStream openFileOutput(String name, int mode) public class MainActivity extends Activity { private TextView show; private

  • MySQL Innodb 存储结构 和 存储Null值 用法详解

    背景: 表空间:INNODB 所有数据都存在表空间当中(共享表空间),要是开启innodb_file_per_table,则每张表的数据会存到单独的一个表空间内(独享表空间). 独享表空间包括:数据,索引,插入缓存,数据字典.共享表空间包括:Undo信息(不会回收<物理空间上>),双写缓存信息,事务信息等. 段(segment):组成表空间,有区组成. 区(extent):有64个连续的页组成.每个页16K,总共1M.对于大的数据段,每次最后可申请4个区. 页(page):是INNODB 磁盘

  • JavaScript面向对象之class继承类案例讲解

    1. 面向对象class继承 在上面的章节中我们看到了JavaScript的对象模型是基于原型实现的,特点是简单,缺点是理解起来比传统的类-实例模型要困难,最大的缺点是继承的实现需要编写大量代码,并且需要正确实现原型链. 有没有更简单的写法?有! 我们先回顾用函数实现 Student 的方法: function Student(name) { this.name = name; } // 现在要给这个Student新增一个方法 Student.prototype.hello = function

  • JavaScript navigator.userAgent获取浏览器信息案例讲解

    浏览器对于我们来说,可能是最熟悉的工具了.熟知的浏览器Firefox.Opera.Safari.IE.Chrome以外,据说世界上还有近百种浏览器.通常在开发的时候要做到兼容各种浏览器,因此提炼出判断浏览器类型及系统是很重要的. 先来看看什么是User-Agent?User-Agent是HTTP请求中的用户标识,一般发送一个能够代表客户端类型的字符串,比如浏览器类型 操作系统等信息.User-Agent 的约定格式是:应用名,跟一个斜线,跟版本号,剩下的是自由的格式. 此处我只实例展示几个浏览器

随机推荐