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. Fourinone 作者博客 -集群复制

    http://my.oschina.net/fourinone/blog http://www.iteye.com/blogs/subjects/fourinone http://fourinone. ...

  2. Cocos2dx 3.1.1 将一个2.X的项目改成3.1版本

    最近在论坛上下载到了一个Cocos2dx的单机跑酷例子, 也不知道是2.x版的, 花了一天时间试着把他改成3.1.1的试试, 现在已经可以顺利编译的, 但是还是有Heap Free的问题,调试了好几天 ...

  3. js获取光标位置

    js获取光标位置   var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ ...

  4. python数据类型之 dict(map)

    字典  一.创建字典  方法①:  >>> dict1 = {}  >>> dict2 = {'name': 'earth', 'port': 80}  >& ...

  5. shell之crontab

    一  crontab高级用法 Crontab 主要是在做排程, 通常一般寫法大概都是如下: 0 0 * * * /usr/local/www/awstats/cgi-bin/awstats.sh 這種 ...

  6. 冯如杯day1

    day1 今天尝试配置了seetaface工程 主要按照这个网址中提示的步骤配置seetaface 第一步安装并配置OpenCV 按照这个网址进行配置,结果遇到了这样的错误 无法启动此程序,因为计算机 ...

  7. Android点击Button按钮的四种事件监听方法总结

    首先我们在activity_main.xml里面先定义一个Button空间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <RelativeLayout xmlns:a ...

  8. vs2012中的小技巧

    解除起始页: 网站(或者叫项目)-属性-启动选项-使用当前页 发布项目: 有些文件在发布的时候,不能发布到指定文件夹中,所以要手动修改该文件的属性 修改两处: 复制到输出目录:始终复制 生成操作:内容

  9. iOS开发——An App ID with identifier "*****" is not avaliable

    Error: An App ID with identifier "*****" is not avaliable. Please enter a different string ...

  10. Qt下libusb-win32的使用（转）

    源:Qt下libusb-win32的使用(一)打印设备描述符 主要是在前一篇的基础上,学习libusb-win32的API使用.程序很简单,就是打印指定USB设备的设备描述符(当然其他描述符也是可以的 ...