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

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

 

演示样例

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script language="JavaScript">

			function saveStorage(id){

				var target = document.getElementById(id);

     		    var str = target.value;

                sessionStorage.setItem("msg", str);

			}

			function loadStorage(id){

				var target = document.getElementById(id);

     			var msg = sessionStorage.getItem("msg");

     			target.innerHTML = msg;

			}

		</script>

	</head>

	<body>

		<p id="msg"></p>

		<input type="text" id="input"/>

		<button onclick="saveStorage('input')">保存数据</button>

		<button onclick="loadStorage('msg')">获取数据</button>

	</body>

</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. 针对“永恒之蓝”攻击紧急处置手册（蠕虫 WannaCry）

    首先确认主机是否被感染 被感染的机器屏幕会显示如下的告知付赎金的界面: 如果主机已被感染: 则将该主机隔离或断网(拔网线).若客户存在该主机备份,则启动备份恢复程序. 如果主机未被感染: 则存在四种方 ...

  2. 【转】Python unittest数据驱动工具：DDT

    背景 python 的unittest 没有自带数据驱动功能. 所以如果使用unittest,同时又想使用数据驱动,那么就可以使用DDT来完成. DDT是 “Data-Driven Tests”的缩写 ...

  3. 洛谷 P2678 跳石头【经典二分答案/贪心】

    题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 NN 块岩石(不含起点和终点的岩石).在比赛过程中,选手们将从 ...

  4. 细菌(disease) （位运算）（状态压缩）

    细菌(disease) 时间限制: 1 Sec  内存限制: 64 MB提交: 9  解决: 5[提交][状态][讨论版] 题目描述 近期,农场出现了D(1≤D≤15)种细菌.John要从他的N(1≤ ...

  5. Jenkins获取分支的插件

    Jenkins--->xxxx--->配置--->参数化构建过程--->选择Git Parameter Plug-In插件 Name: git_branch Descripti ...

  6. 安装redis扩展

    1.安装redis模块 wget https://codeload.github.com/phpredis/phpredis/zip/php7 unzip php7 cd phpredis-php7/ ...

  7. RPD Volume 172 Issue 1-3 December 2016 评论03

    Using Stable Free Radicals to Obtain Unique and Clinically Useful Data In Vivo in Human Subjects Abs ...

  8. [BZOJ 3152] 组合子逻辑

    Link: BZOJ 3152 传送门 Solution: 喜闻乐见,gyz出的语文题,题意要看半小时 题意:使用最少的括号将序列分割,对于每个括号中的序列,设最左边的数为$num$,序列中元素个数为 ...

  9. [BZOJ 1805] Sail 船帆

    Link: BZOJ 1805 传送门 Solution: 一道思路比较巧的线段树的题目 首先可以发现,答案和顺序是没有关系的,都是$\sum_{i=1}^n {H_i∗(H_i−1)/2}$. 那么 ...

  10. AtCoder - 2567 RGB Sequence

    Problem Statement There are N squares arranged in a row. The squares are numbered 1, 2, …, N, from l ...