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. [转] M2E插件maven-dependency-plugin问题

    转自 : http://blog.csdn.net/cskgnt/article/details/8530526 问题: maven-dependency-plugin (goals "co ...

  2. Android Camera HAL浅析

    1.Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信 ...

  3. iOS查错机制

    转自: http://mp.weixin.qq.com/s?__biz=MjM5OTM0MzIwMQ==&mid=404478233&idx=2&sn=ae55d4f70fce ...

  4. 一个很好玩的命令：stty

    stty命令修改终端命令行的相关设置.语法stty(选项)(参数)选项-a:以容易阅读的方式打印当前的所有配置:-g:以stty可读方式打印当前的所有配置.参数终端设置:指定终端命令行的设置选项.实例 ...

  5. tcpdump的表达元

    (nt: True 在以下的描述中含义为: 相应条件表达式中只含有以下所列的一个特定表达元, 此时表达式为真, 即条件得到满足) dst host host如果IPv4/v6 数据包的目的域是host ...

  6. HDU 4169 UVALive 5741 Wealthy Family

    树形背包.DP递推的思路很简单.... 但是由于节点有15万个,先不论空间复杂度,这样开dp数组 dp[150000+10][300+10],如果初始化是memset(dp,-1,sizeof dp) ...

  7. 3个人一起写的EI论文可以检索到啦~ --> Exploring the use of a 3D Virtual Environment in Chinese Cultural Transmission

    <a href='http://www.engineeringvillage.com/blog/document.url?mid=cpx_10ed754f14b5b7381b6M764b1017 ...

  8. (简单) HDU 3308 LCIS，线段树+区间合并。

    Problem Description Given n integers. You have two operations: U A B: replace the Ath number by B. ( ...

  9. Android相关修改教程

    ICS: 自己动手实现接通震动功能 原生来电归属地修改教程

  10. linux下源码编译安装mysql

    1.安装依赖的包: yum install -y gdb cmake ncurses-devel bison bison-devel 2.创建mysql安装目录和数据文件目录 mkdir -p /us ...