HTML5深入学习之数据存储

概述

  本来,数据存储都是由 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>

原文地址:https://www.cnblogs.com/duxiu-fang/p/11109520.html

时间: 2024-10-28 08:55:01

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

Android学习笔记 --- 数据存储与访问 (File,sdcard,sharedpreferences,sqlite)

一.使用文件进行数据存储 1.context.openFileOutput()方法  写入文件内容 在上下文context中 openFileOutput方法可以用于把数据输出到文件中 示例代码: public static void fileStorage(Context context){ try { FileOutputStream fos = context.openFileOutput("filedata.txt", context.MODE_PRIVATE); fos.wr

理解 Android 本地数据存储 API

利用首选项.SQLite 和内部及外部内存 API 对于需要跨应用程序执行期间或生命期而维护重要信息的应用程序来说,能够在移动设备上本地存储数据是一种非常关键的功能.作为一名开发人员,您经常需要存储诸如用户首选项或应用程序配置之类的信息.您还必须根据一些特征(比如访问可见性)决定是否需要涉及内部或外部存储器,或者是否需要处理更复杂的.结构化的数据类型.跟随本文学习 Android 数据存储 API,具体来讲就是首选项.SQLite 和内部及外部内存 API. http://www.ibm.com

IOS数据存储之Sqlite数据库

前言: 之前学习了数据存储的NSUserDefaults,归档和解档,沙盒文件存储,但是对于数据量比较大,需要频繁查询,删除,更新等操作的时候无论从效率上还是性能上,上述三种明显不能满足我们的日常开发需要了.这个时候我们必须借助数据库,做为Android开发的都知道采用的是一种轻量级数据库Sqlite.其实它广泛用于包括浏览器.IOS,Android以及一些便携需求的小型web应用系统.它具备占用资源低,处理速度快等优点.接下来我们具体认识一下. 我们在项目开发中需要引入libsqlite3.d

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

原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage .sessionStorage.globalStorage   Posted on 2012-03-25 11:23 祥叔 阅读(2) 评论(0)  编辑 收藏 HTML5 提供了四种在客户端存储数据的新方法,即 localStorage .sessionStorage.globalStorage

(转)HTML5开发学习(3):本地存储之Web Sql Database

原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Database(附源码) Posted on 2012-03-25 14:03 祥叔 阅读(0) 评论(0)  编辑 收藏 接着上一篇,这节介绍Html5 本地存储中的一个很重要的概念--Web Sql Database ,正因为本人觉得这个很重要,所有独立出来重点介绍.即时你完全没听说过这个概念,望文生

HTML5学习之离线存储

STORAGE(存储) Cookie 在HTML5技术以前我们会使用 cookie,在浏览器端缓存一些数据,例如:登录用户信息,历史搜索信息等等.但是cookie所支持的容量仅仅只有 4k ,也没有专门的api来操作,只能依赖一些开源的库, 这里使用 cookies.js 存储和获取cookie信息 // 这是一个cookie值 Cookies.set('key', 'value'); // 链式调用 Cookies.set('key', 'value').set('hello', 'world

[HTML5] 数据存储

HTML5 使用 JavaScript 来存储和访问数据 数据存储: 浏览器支持:主流全部支持(“IE 8.0”.“Chrome 4.0”.“Firefox 4.0”.“Safari 4.0”.“Android 3.0”.“iOS 5.0”): 最高大小:5M: 形式: LocalStorage:本地存储,存储的数据没有时间限制: <script type="text/javascript"> localStorage.lastname="Smith";

Android 学习笔记之数据存储SharePreferenced+File

学习内容: Android的数据存储.... 1.使用SharedPreferences来保存和读取数据... 2.使用File中的I/O来完成对数据的存储和读取...   一个应用程序,经常需要与用户之间形成交互...需要保存用户的设置和用户的数据信息...这些都离不开数据的存储...Android的数据采用五种方式来进行存储...在这里就先介绍两种存储方式... 1.使用SharedPreferences存储数据...   对于软件配置参数的保存,Windows系统采用ini文件来进行保存,

HTML5数据存储

介绍两种对象使用方法: sessionStorage方法如果关闭了浏览器,这个保存的数据就丢失. 1.sessionStorage 保存数据:sessionStorage.setItem(key,value); 读取数据:sessionStorage.getItem(key); localStorage则是浏览器被关闭,下次在打开浏览器浏览这个页面点击读取数据时任然能读取到保存的数据. 注*这个数据是区分浏览器的,在别的浏览器中是读取不到这个浏览器保存的数据的. 2.localStorage 保