webstorage 分sessionStorage和localstorage，sessionStorage是暂时保存，localStorage是永久保存。 sessionStorage假设浏览器关闭了，数据就没有了。而localStorage则不会。

sessionStorage：
保存数据     sessionStorage.setItem(key, value);
读取数据     sessionStorage.getItem(key);
localStorage：
保存数据     localStorage.setItem(key, value);
读取数据     localStorage.getItem(key);

 

演示样例

  1. <span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<script language="JavaScript">
  7.  
  8. 			function saveStorage(id){
  9. 				var target = document.getElementById(id);
  10.      		    var str = target.value;
  11.                 sessionStorage.setItem("msg", str);
  12. 			}
  13.  
  14. 			function loadStorage(id){
  15. 				var target = document.getElementById(id);
  16.      			var msg = sessionStorage.getItem("msg");
  17.      			target.innerHTML = msg;
  18. 			}
  19.  
  20. 		</script>
  21. 	</head>
  22. 	<body>
  23. 		<p id="msg"></p>
  24. 		<input type="text" id="input"/>
  25. 		<button onclick="saveStorage('input')">保存数据</button>
  26. 		<button onclick="loadStorage('msg')">获取数据</button>
  27. 	</body>
  28. </html></span>

假设使用得好，也可将webStorage作为一个简易的数据库，键的值採用JSON字符串就能够。当然这仅仅是能够实现，运用的时候，webStorage的空间还是非常珍贵的。一般大多数浏览器都仅仅提供5M左右的空间。

HTML 5 中WebStorage实现数据本地存储的更多相关文章

  1. Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  2. 利用php的序列化和反序列化来做简单的数据本地存储

    利用php的序列化和反序列化来做简单的数据本地存储 如下程序可以做为一个工具类 /** * 利用php的序列化和反序列化来做简单的数据本地存储 */ class objectdb { private ...

  3. IOS数据本地存储的四种方式--

    注:借鉴于:http://blog.csdn.net/jianjianyuer/article/details/8556024 在IOS开发过程中,不管是做什么应用,都会碰到数据保存问题.将数据保存到 ...

  4. Python 黑帽编程 4.2 Sniffer之数据本地存储和加载

    在上一节,我们完成了编写一个简易的Sniffer的第一步--数据捕获. 很多时候,我们需要将捕获的数据先保存到磁盘上,之后再使用工具或者自己编写代码来进行详细分析. 本节我们在上一节的基础上来讲解保存 ...

  5. python struct.pack() 二进制文件，文件中打包二进制数据的存储与解析

    学习Python的过程中,遇到一个问题,在<Python学习手册>(也就是<learning python>)中,元组.文件及其他章节里,关于处理二进制文件里,有这么一段代码的 ...

  6. MySQL-5.7中InnoDB表数据文件存储位置

    学习地址:https://www.cnblogs.com/tongxiaoda/p/7874535.html

  7. iOS数据持久化存储

    本文中的代码托管在github上:https://github.com/WindyShade/DataSaveMethods 相对复杂的App仅靠内存的数据肯定无法满足,数据写磁盘作持久化存储是几乎每 ...

  8. 关于Unity中的本地存储

    本地存储 在做游戏的时候,经常需要在本机存储一些数据,比如闯关类游戏要记录闯到第几关,做单机的时候要把数据保存到本地,下次启动的时候数据存在,就是把数据保存到磁盘里面或者手机的flash闪存里面. U ...

  9. HTML5新增的本地存储功能(笔记)

    HTML5新增的本地存储功能分为两种,分别对应两个JS对象:①本地存储对应localStorage对象,主要用于长期保存整个网站的数据(这些数据可以永久保存在客户端电脑硬盘内).②会话存储对应sess ...

随机推荐

  1. 根据流程实例ID获取当前任务

    JAVA: Task task = this.processEngine.getTaskService().createTaskQuery().processInstanceId(“132501”). ...

  2. AC日记——逃离僵尸岛 洛谷 P3393

    逃离僵尸岛 思路: spfa: 代码: #include <cstdio> #include <cstring> #include <iostream> #incl ...

  3. [libGDX游戏开发教程]使用libGDX进行游戏开发(12)-Action动画

    前文章节列表:  使用libGDX进行游戏开发(11)-高级编程技巧   使用libGDX进行游戏开发(10)-音乐音效不求人,程序员也可以DIY   使用libGDX进行游戏开发(9)-场景过渡   ...

  4. centos6.5 卸载adobeflash

    # rpm -e flash-plugin # rpm -qa | grep ^flash-plugin

  5. Lookup 组件用法全解

    Lookup是查找的意思,Lookup组件实现两个数据源的连接,和Join语句实现的功能类似,使用Lookup 组件需要配置: 两个输入:一个是上游数据流的输入Source Table,一个是要查找的 ...

  6. fastxml Jackson annotation使用小记

    dependencies: compile("com.fasterxml.jackson.core:jackson-annotations") compile("com. ...

  7. 安装mongodb插件

    1.安装mngodb模块 wget http://pecl.php.net/get/mongodb-1.2.4.tgz tar zxf mongodb-1.2.4.tgz cd mongodb-1.2 ...

  8. fiddler进行弱网测试

    fiddler模拟限速的原理 弱网测试原帖连接:http://blog.csdn.net/eleven521/article/details/19089671 我们可以通过fiddler来模拟限速,因 ...

  9. [P2396] yyy loves Maths VII

    Link: P2396 传送门 Solution: 一眼能看出$O(n*2^n)$的状压$dp$ 但此题是个卡常题,$n=23/24$的时候就别想过了 这题算是提供了一种对状压$dp$的优化思路吧 原 ...

  10. 【kmp算法】模板

    void GetFail(char P[],int __next[])//__next[i]表示s[0]~s[i-1]的前缀中,最大长度相等的前后缀是多少 { __next[0]=-1; int le ...