html_web存储
HTML5存储
HTML5 web存储，一个比cookie更好的本地存储方式。
什么是HTML5 Web存储？
使用HTML5可以在本地存储用户的浏览数据。
早些时候，本地存储使用的是cookie.但是Web存储更加的安全与快速。这些数据不会被保存在服务器上，它可以存储大量的数据，而不影响网站的性能。
浏览器支持
IE8+,firefow,Opera,Chrome和Safari
localStorage和sessionstorage
客户端存储数据的两个对象为：
localStorage-没有时间先升值的数据存储。
sessionStorage-针对一个session的数据存储。
if(typeof(Storage)!=="undefined") {
// 是的! 支持 localStorage sessionStorage 对象! // 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
Web Storage开发一个简单的网站列表程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5本地存储之Web Storage篇</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="sitename">网站名(key)：</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<br/>
<label for="siteurl">网 址(value)：</label>
<input type="text" id="siteurl" name="siteurl"/>
<br/>
<input type="button" onclick="save()" value="新增记录"/>
<hr/>
<label for="search_phone">输入网站名：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<script>
// 载入所有存储在localStorage的数据
loadAll();
//保存数据
function save(){
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("添加成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var sitename = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是：" + sitename;
}
//将所有存储在localStorage中的对象提取出来，并展现到界面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>网站名</td><td>网址</td></tr>";
for(var i=0;i<localStorage.length;i++){
var sitename = localStorage.key(i);
var siteurl = localStorage.getItem(sitename);
result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "数据为空……";
}
}
</script>
</body>
</html>
html_web存储的更多相关文章
- 基于本地存储的kvm虚拟机在线迁移
基于本地存储的kvm虚拟机在线迁移 kvm虚拟机迁移分为4种(1)热迁移基于共享存储(2)热迁移基于本地存储(3)冷迁移基于共享存储(4)冷迁移基于本地存储 这里介绍的是基于本地存储的热迁移 动态块迁 ...
- HTML5 sessionStorage会话存储
sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据.本篇主要介绍 sessionStorage(会话存储) ...
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- MySQL数据库和InnoDB存储引擎文件
参数文件 当MySQL示例启动时,数据库会先去读一个配置参数文件,用来寻找数据库的各种文件所在位置以及指定某些初始化参数,这些参数通常定义了某种内存结构有多大等.在默认情况下,MySQL实例会按照一定 ...
- Android数据存储之Android 6.0运行时权限下文件存储的思考
前言: 在我们做App开发的过程中基本上都会用到文件存储,所以文件存储对于我们来说是相当熟悉了,不过自从Android 6.0发布之后,基于运行时权限机制访问外置sdcard是需要动态申请权限,所以以 ...
- nginx+iis+redis+Task.MainForm构建分布式架构 之 (redis存储分布式共享的session及共享session运作流程)
本次要分享的是利用windows+nginx+iis+redis+Task.MainForm组建分布式架构,上一篇分享文章制作是在windows上使用的nginx,一般正式发布的时候是在linux来配 ...
- nodejs项目mysql使用sequelize支持存储emoji
nodejs项目mysql使用sequelize支持存储emoji 本篇主要记录nodejs项目阿里云mysql如何支持存储emoji表情. 因由 最近项目遇到用户在文本输入emoji进行存储的时候导 ...
- html5的web存储
在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...
- Mysql存储引擎及选择方法
0x00 Mysql数据库常用存储引擎 Mysql数据库是一款开源的数据库,支持多种存储引擎的选择,比如目前最常用的存储引擎有:MyISAM,InnoDB,Memory等. MyISAM存储引擎 My ...
随机推荐
- python socket服务器进行远程升级
# coding:utf-8from socket import *import binascii, linecache, time ServerUrl = "127.0.0.1:900&q ...
- matlab,xls转换为mat文件
b=xlsread('iris_data.xls');save iris_data.mat b
- win7安装omnetpp-4.6
最近做毕设要用omnet仿真系统,就试着在win7上装了一下,分享一下经验咯.因为lz经常刷机,所以安装过程都是从头再来的,费话不多说.下面是安装过程: (1) 安装jdk,我就百度一下,然后找 ...
- 在eclipse中maven web项目部署到tomcat，访问不了
修改eclipse中tomcat发布路径后,能正常访问
- Myeclipse2014中，新建部署Maven项目
一.环境 1.1 myeclipse2014 1.2 maven3.2.1 1.3 jdk1.7 上述环境配置可参照我之前编写的maven搭建方面的文档.本文着重介绍myeclipse2014下mav ...
- @Autowired注解（转）
5.6.4 @Autowired注解 自Spring诞生以来,
- Java中获取当前日期
java.util.Date date = new Date();java.Text.SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd ...
- 关于微信端不支持window.location.reload()
今天写了一个调查问卷页面,项目经理说要表单提交之后页面刷新,之间没沟通清楚,以为整个页面重载,所以刚开始就用了window.location.reload()的方法. 但是发现,在微信直接打开之后,居 ...
- 更新sdk
更新sdk,遇到了更新下载失败问题: Fetching https://dl-ssl.google.com/android/repository/addons_list-2.xmlFetched Ad ...
- Nginx将项目配置在子目录
问题:一个完整的项目需要整合在另外一个项目中,作为一个子模块存在 有两个项目prject1 根目录/www/project1与project2 /www/project2,现在是想将probject1 ...