概述

　　本来，数据存储都是由 cookie 完成的，但是 cookie 不适合大量数据的存储，cookie 速度慢且效率低。

　　现在，HMLT5提供了两种在客户端存储数据的办法：

  1. localStorage(没有时间限制的数据存储，即当我们设置了之后浏览器关闭后再去访问它依然存在)
  2. sessionStorage(针对一个session的数据存储，当我们设置了之后浏览器关闭后再去访问他就消失了)

两者之间的实测对比

　　localStorage

　　　　　　首先我们先运行这段代码：　　　　

localStorage.setItem('name', 'lisi');

alert(localStorage.getItem('name'));

　　　　　　然后浏览器则弹出显示：

　　　　　　接着，我们注释掉localStorage.setItem('name', 'lisi');，关闭浏览器重新访问，依然可以显示：

　　

　　sessionStorage

　　　　　　步骤大概和设置 localStorage 一样，但是浏览器关闭后再次访问已不见 sessionStorage

　　　　　　浏览器关闭前：

　　　　　　

　　　　　　浏览器关闭后再次访问：

　　　　　　

实例(记住用户名与密码)-----使用 localStorage

常用API:

  • setItem() => 设置要存储得数据
  • getItem() => 获取存储的数据
  • removeItem() => 移除存储的数据

代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8" />

    <title>独秀不爱秀</title>

</head>

<body>

    用户名: <input type="text" name="username" id="username"><br>

    密码：  <input type="password" name="pwd" id="pwd"><br>

    记住用户名与密码:  <input type="checkbox" name="save" id="save">

    <script type="text/javascript">

        var username = document.getElementsByName('username')[0];

        var pwd = document.getElementsByName('pwd')[0];

        var save = document.getElementsByName('save')[0];

        if (localStorage.getItem('username') && localStorage.getItem('pwd')) {

            // 将获取到的值添加到 HTML

            username.value = localStorage.getItem('username');

            pwd.value = localStorage.getItem('pwd');

        }

        save.addEventListener('click', function () {

            if (save.checked) {

                localStorage.setItem('username', username.value);

                localStorage.setItem('pwd', pwd.value);

            } else {

                localStorage.removeItem('username');

                localStorage.removeItem('pwd');

            }

        });

    </script>

</body>

</html>

HTML5深入学习之数据存储的更多相关文章

  1. iOS学习笔记--数据存储

    iOS应用数据存储的常用方式 XML属性列表(plist)归档 Preference(偏好设置) NSKeyedArchiver归档(NSCoding) SQLite3 Core Data 1. XM ...

  2. Android开发学习——android数据存储

    Android的存储 Android中的数据存储方式及其存储位置 SharedPrefrence存储 1). 位置           /data/data/packageName/shared_pr ...

  3. AppCan学习笔记--数据存储及listview简单应用

    AppCan AppCan开发平台简介 AppCan是Hybrid App开发框架即混合开发框架,有官方提供底层功能使用API HTML5和JavaScript只是作为一种解析语言,真正调用的都是Na ...

  4. IOS数据存储之Sqlite数据库

    前言: 之前学习了数据存储的NSUserDefaults,归档和解档,沙盒文件存储,但是对于数据量比较大,需要频繁查询,删除,更新等操作的时候无论从效率上还是性能上,上述三种明显不能满足我们的日常开发 ...

  5. IOS数据存储之文件沙盒存储

    前言: 之前学习了数据存储的NSUserDefaults,归档和解档,对于项目开发中如果要存储一些文件,比如图片,音频,视频等文件的时候就需要用到文件存储了.文件沙盒存储主要存储非机密数据,大的数据. ...

  6. 理解 Android 本地数据存储 API

    利用首选项.SQLite 和内部及外部内存 API 对于需要跨应用程序执行期间或生命期而维护重要信息的应用程序来说,能够在移动设备上本地存储数据是一种非常关键的功能.作为一名开发人员,您经常需要存储诸 ...

  7. Android中的数据存储（二）：文件存储 2017-05-25 08:16 35人阅读 评论(0) 收藏

    文件存储 这是本人(菜鸟)学习android数据存储时接触的有关文件存储的知识以及本人自己写的简单地demo,为初学者学习和使用文件存储提供一些帮助.. 如果有需要查看SharedPreference ...

  8. Android中的数据存储（一）：SharedPreferences 2017-05-24 10:35 64人阅读 评论(1) 收藏

    SharedPreferences 这是本人(菜鸟)学习android数据存储时接触的有关SharedPreferences的知识以及本人自己写的一个简单地demo,为初学者学习和使用SharedPr ...

  9. (转)HTML5开发学习（2）:本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

随机推荐

  1. USACO Poker Hands

    洛谷 P3078 [USACO13MAR]扑克牌型Poker Hands 题目传送门 JDOJ 2359: USACO 2013 Mar Silver 1.Poker Hands JDOJ传送门 题目 ...

  2. Comet OJ 夏季欢乐赛 烤面包片

    烤面包片 https://cometoj.com/contest/59/problem/C?problem_id=2698 题目描述 鸡尾酒最喜欢吃东北的烤面包片了.每次到东北地区的区域赛或者是秦皇岛 ...

  3. ajax中什么时候进success和error

    先简单介绍下ajax: 简单的说Ajax请求通过XMLHttpRequest对象发送请求,该对象有四个状态(readyState): -未初始化.-正在初始化.-发送数据.-正在发送数据.-完成. 当 ...

  4. P1908 逆序对-（树状数组）

    https://www.luogu.org/problem/P1908 比较喜欢线段树,懒得用树状数组(只会套模板,位运算的精髓没有领悟到),一直没有记录树状数组代码,又得捡回来,趁这道题记录一下模板 ...

  5. Cannot execute statement: impossible to write to binary log since BINLOG_FORMAT = STATEMENT and at least one table uses a storage engine limited to row-based logging. InnoDB is limited to row-logging

    1665 - Cannot execute statement: impossible to write to binary log since BINLOG_FORMAT = STATEMENT a ...

  6. vue+ typescript 使用parcel 构建

    parcel 是一个零配置的前端构建工具,相比webpack 更快,同时使用简单以下是 一个简单的使用typescript 开发vue 应用,同时使用parcel 构建,同时集成了docker 构建, ...

  7. chrome-解决该扩展程序未列在 Chrome 网上应用店中

    1.win10添加策略组 复制以下内容到.bat文件中,右键-以管理员身份运行,即可添加策略组 pushd "%~dp0" dir /b C:\Windows\servicing\ ...

  8. [RN] React Native 中使用 stickyHeaderIndices 实现 ScrollView 的吸顶效果

    React Native中,ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果. 例如下面代码中: <ScrollView showsVert ...

  9. nlp语义理解的一点儿看法

    nlp领域里,语义理解仍然是难题! 给你一篇文章或者一个句子,人们在理解这些句子时,头脑中会进行上下文的搜索和知识联想.通常情况下,人在理解语义时头脑中会搜寻与之相关的知识.知识图谱的创始人人为,构成 ...

  10. 【视频开发】伽马校正(gamma correction)学习笔记

    我相信几乎所有做图像处理方面的人都听过伽马校正(Gamma Correction)这一个名词,但真正明白它是什么.为什么要有它.以及怎么用它的人其实不多.我也不例外.  最初我查过一些资料,但很多文章 ...