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. Oracle case 关键字的使用

    select e.salary, --case 语句开始 case then salary else salary end new_salary --case 语句结束,可见也和存储过程等结束方式一样 ...

  2. Javac和java命令执行java程序

    javac [ options ] [ sourcefiles ] [ @files ]:编译一个java文件. 1. 注意到执行命令必须要指定到包含java文件的路径,否则会出现找不到file错误. ...

  3. Linux系统目录

    [root@localhost ~]# ls /bin dev home lost+found misc opt root selinux sys usrboot etc lib media net ...

  4. JAVA基础--代理模式

    interface Network{ public void browse() ; // 浏览 } class Real implements Network{ public void browse( ...

  5. OPENCV图像变换-1

    图像变换是指将一幅图像变换为图像数据的另一种表现形式,例如将图像进行傅立叶变换,或者对图像进行X,Y方向的求导等,经过这些变换,可以将图像数据处理中的某些问题换一个别的角度想办法,所以图像变换是图像处 ...

  6. BufferedReader 输出与BufferedWriter 输入的用法

    public static void main(String[] args) {  String content[] = {"好久不见了","最近好吗",&qu ...

  7. [转]SQL Server® 2008 R2 Express 静默安装

    1. http://msdn.itellyou.cn/下载Express版SQL Server 2.快捷键win+R,进入CMD,解压文件,解压命令为 <文件名>.exe /x <解 ...

  8. STL中map用法

    Map是 STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于 这个特性,它完成有可能在我们处理一对一数据的 ...

  9. AndroidStudio项目.gitignore文件内容

    .metadata/ *~ # files for the dex VM *.dex # Java class files *.class # generated files bin/ gen/ li ...

  10. 试水mongodb er

    1)data ready var a = {"name":"zhekou","CharDate":"2015-12-01" ...