HTML5 提供了两种在客户端存储数据的新方法之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。cookie有时间限定，可以自定义设置。

1、客户端存储数据的新方法

1）localStorage-没有时间限制的数据存储

2）sessionStorage-针对一个session的数据存储，当浏览器关闭，数据就会清除

2、Web存储-localStorage

1）存储特点：localStorage存储的数据没有时间限制，第二天，第二周或者一年之后，数据依然可以使用。

实现在文本框中输入的值，刷新页面也不消失：

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="utf-8">
     <title></title>
     <script src = "app.js"></script>
 </head>
 <body>
     <textarea style="width:200px;height: 200px" id="ta"></textarea>
     <button id="btn">save</button>
 </body>
 </html>

其中使用到的app.js:

 var ta;
 var btn;
 window.onload = function(){
     ta = document.getElementById("ta");
     if(localStorage.text){
         ta.value = localStorage.text;
     }
     btn = document.getElementById("btn");

     btn.onclick = function(){
         localStorage.text = ta.value;
      //   alert(ta.value);
     }
 }

用浏览器打开html文件显示的页面---审查元素---Resources---Local Storage中，可以看到缓存的内容。

3、Web存储-sessionStorage的使用

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="utf-8">
     <title></title>
     <script src="app.js"></script>
 </head>
 <body>
     <span id="txt">0</span>
     <button id="addbtn">add</button>
 </body>
 </html>

其中使用到的app.js:

 var num = 0;
 var txt;
 var btn;

 window.onload = function(){
     txt = document.getElementById("txt");
     btn = document.getElementById("addbtn");
     if(sessionStorage.num){
         num = sessionStorage.num;
     }else{
         num=0;
     }

     btn.onclick = function () {
         num++;
         sessionStorage.num = num;
         showNum();
     }
 }

 function showNum(){
     txt.innerHTML = num;
 }

[html] 学习笔记--Web存储的更多相关文章

  1. HTML5学习笔记 Web存储

    HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储 使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需 ...

  2. SQL反模式学习笔记12 存储图片或其他多媒体大文件

    目标:存储图片或其他多媒体大文件 反模式:图片存储在数据库外的文件系统中,数据库表中存储文件的对应的路径和名称. 缺点:     1.文件不支持Delete操作.使用SQL语句删除一条记录时,对应的文 ...

  3. HTML学习之Web存储（五）

    本地数据库功能大大增强了Web应用对于本地存储数据的方式和功能.Web时代真正进入了:“客户端为重,服务端为轻的时代”. <!DOCTYPE html> <html xmlns=&q ...

  4. 【C语言学习笔记】存储类、链接和内存管理

    因为对内存管理部分一直没有很清楚的思路,所以一直在找资料想系统看一下这部分的内容.在C primer plus里看到了这一章,虽然大多都是心知肚明的东西,但是还是很多概念性系统性的东西让我眼前一亮,把 ...

  5. java学习笔记—web计算器（36）

    MVC模式 模式主要的任务是帮助开发者解决一类问题. MVC模式主要是用于规划你的网站的开发的一个基本的结构. Servlet记住充当的是控制器层.cn.itcast.controller Java类 ...

  6. 安全学习笔记-web安全之XSS攻击

    web安全之XSS攻击 XSS 即跨站脚本攻击,是 OWASP TOP10 之一.它的全称为 Cross-site scripting,因为 CSS 这个简称已经被占用表示为前端三剑客之一的CSS,所 ...

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

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

  8. sql 入门经典（第五版） Ryan Stephens 学习笔记 后续——存储引擎

    一.引擎基础 1 查看系统支持的存储引擎 show engines; 2 查看表使用的存储引擎两种方法: a.show table status from database_name where na ...

  9. 《ASP.NET MVC4 WEB编程》学习笔记------Web API 续

    目录 ASP.NET WEB API的出现缘由 ASP.NET WEB API的强大功能 ASP.NET WEB API的出现缘由 随着UI AJAX 请求适量的增加,ASP.NET MVC基于Jso ...

随机推荐

  1. appium通过WiFi连接真机进行测试

    http://www.th7.cn/Program/Android/201507/514602.shtml appium通过WiFi连接真机进行测试   2015-07-24 19:43:07CSDN ...

  2. 串口通信中ReadFile和WriteFile的超时详解！

    源:串口通信中ReadFile和WriteFile的超时详解! 在用ReadFile和WriteFile读写串行口时,需要考虑超时问题.如果在指定的时间内没有读出或写入指定数量的字符,那么ReadFi ...

  3. Lua学习系列（二）

    资源整理: 风云老师博客: http://blog.codingnow.com/eo/luaoeeeaeau/ 知乎: https://www.zhihu.com/question/20736660 ...

  4. 检测网站挂马程序（Python）

    系统管理员通常从svn/git中检索代码,部署站点后通常首先会生成该站点所有文件的MD5值,如果上线后网站页面内容被篡改(如挂马)等,可以比对之前生成MD5值快速查找去那些文件被更改,为了使系统管理员 ...

  5. 基于LNMP的Zabbbix之Zabbix Agent源码详细安装，但不给图

    基于LNMP的Zabbbix之Zabbix Server源码详细安装:http://www.cnblogs.com/losbyday/p/5828547.html wget http://jaist. ...

  6. Linux Apache2 配置介绍

    转自:http://blog.csdn.net/hursing/article/details/18730813 apache原指http server程序,后来成为了该程序的组织名,所以把原程序名定 ...

  7. Spring--Bean scope

    singleton, prototype,request, session, global session bean.xml: <?xml version="1.0" enc ...

  8. 【转】C++中this指针的用法详解

    1.this指针的用处 一个对象的this指针并不是对象本身的一部分,不会影响sizeof(对象)的结果.this作用域是在类内部,当在类的非静态成员函数中访问类的非静态成员的时候,编译器会自动将对象 ...

  9. java调用C/C++写的dll（转）

    源:java调用C/C++写的dll Java语言本身具有跨平台性,如果通过Java调用DLL的技术方便易用,使用Java开发前台界面可以更快速,也能带来跨平台性. Java调用C/C++写好的DLL ...

  10. 基于libUSB的USB设备固件更新程序(下载数据)（转）

    源:基于libUSB的USB设备固件更新程序(下载数据) 本文紧接上一篇日志:基于libUSB-Win32的USB设备固件更新程序(前言),相关背景以及起因等,此处不再赘述,如感兴趣请移步. libU ...