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. Sping--life cycle

    bean.xml: 注意, 千万不要后面加上 scope="prototype" <?xml version="1.0" encoding="U ...

  2. C# MODBUS协议 上位机(转)

    源:C# MODBUS协议 上位机 C#写了一款上位机监控软件,基于MODBUS_RTU协议. 软件的基本结构: 采用定时器(Timer控件)为时间片. 串口采用serialPort1_DataRec ...

  3. JQuery实现超链接鼠标提示效果

    一.第一种方法用Jquery<p><a href="http://www.nowamagic.net/" class="tooltip" ti ...

  4. windows server 2012 AD 活动目录部署系列（五）备份和还原域控制器

    在前篇博文中,我们介绍了用户资源的权限分配,用户只要在登录时输入一次口令,就能访问基于该域所分配给他的所有资源. 但是我们需要考虑一个问题:万一域控制器坏了怎么办?!如果这个域控制器损坏了,那用户登录 ...

  5. iOS开发——Localizable.strings

    这篇写的不多,但是绝对诚意满满.不会像别人一样,要不不详细,要不罗里吧嗦一堆. 1.创建Localizable.strings文件 Command+N—>iOS—>Resource—> ...

  6. S3C2440的SPI解析

    位串行数据的频率.如果只希望发送,则接收数据可以保持伪位(dummy).此外如果只希望接收,则需要发送伪位'1'数据 使用SPI主要需要以下寄存器 选择SPI模式,中断模式,查询模式等SCK选择,主从 ...

  7. 一个php开发的用于路由器的小功能

    最近接到一个需求,假设有A.B.C 三台主机.现A主机要访问C主机上的一个脚本,并且根据A传递的参数给C主机,同时接受C主机返回来的数据.但是现在A主机不能直接通过url.IP访问C主机,需要借由主机 ...

  8. iOS中UITextField 使用全面解析 分类： ios技术 2015-04-10 14:37 153人阅读 评论(0) 收藏

    //初始化textfield并设置位置及大小   UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 13 ...

  9. Maven的安装和使用

    http://repo.spring.io/release/org/springframework/spring/ 安装配置:https://segmentfault.com/a/1190000003 ...

  10. vs2015编译mysql c++ connector

    目前MySQL Connector/C++的binary版本最高只支持VS2008,VS2015需要下载源码自行编译. 1.CMAKE 到官网下载最新的稳定版本 把bin目录添加到环境变量PATH中 ...