html5 localStorage讲解
早期的web中使用cookies在客户端保存诸如用户名等简单的信息,但是,在使用cookies存储永久数据存在以下问题。
1.cookies的大小限制在4kB,不适合大量的数据存储。
2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。
3 cookies是随HTTP事务一起被发送的,因此会浪费一部分带宽。
HTML5很好的提供了本地存储的功能,以键值对存储的解决方案,支持容量至少为4M,HTML5的web提供了两种客户端存储方式。
1.localStorage:是一种没有时间限制的数据存储方式,可以将数据永久保存在客户端。
sessionStorage:指的是针对一个session的数据存储,即将数据保存在session对象中,当关闭浏览器后,这些数据就被删除。
在使用web存储之前,应该先检查一下浏览器是否支持localStorage和sessionStorage(I7以下不支持)
判断方法
if(typeof(localStorage !=='undefined'){
};
或者if(window.localStorage){
}
web Storage支持的属性与方法
getItem(key):获取指定key所存储的value值
key(index)方法:返回列表中对应索引的key值
length属性:返回key/value队列的长度
removeItem(key)方法:从Storage中删除一个对应的键值对。
setItem(key,value)方法:将value存储到key指定的字段。
clear()方法:移除所有的内容
注意:设置,获取key/value的方法除了使用setItem()和getItem()方法以外,还分别提供了一个简单的方法:设置方法:sessionStorage.someKey = 'someValue'
获取方法:alert(sessionStorage.someKey);
下面一个例子来说明一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="localstorage.css" type="text/css" rel="stylesheet"/>
<script src="Storage.js" type="text/javascript"></script> </head>
<body>
<input id="t1" type="text" />
<button id ="add" >添加</button>
<button id ='remove'>删除</button><br/>
<textarea id="t2" readonly="readonly"></textarea>
</body>
</html>
css
#t2{
width:500px;
height:400px;
margin-top:10px;
}
js
window.onload = function(){
var content = document.getElementById('t1');
var btn1 = document.getElementById('add');
var btn2 =document.getElementById('remove');
btn1.addEventListener('click',SaveInfo);
btn2.addEventListener('click',clearInfo);
function SaveInfo(){
if(typeof localStorage !=='undefined'){
if(localStorage.storage){
localStorage.storage += content.value + '\n发表时间:'+(new Date()).toDateString() +'\n';
}else{
localStorage.storage = content.value + '\n发表时间:'+(new Date()).toDateString() +'\n';
}
ShowInfo()
}else {
alert('无法存储!')
}
} function clearInfo(){
localStorage.removeItem('storage');
ShowInfo()
} function ShowInfo(){
var txt = document.getElementById('t2');
if(localStorage.storage){
txt.value =localStorage.getItem('storage');
}else{
txt.value ='没有内容!'
}
}
}
html5 localStorage讲解的更多相关文章
- HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...
- (转载)HTML5 LocalStorage 本地存储
原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...
- localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...
- HTML5 LocalStorage 本地存储(转)
原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...
- HTML5 LocalStorage Demo
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 原生JavaScript常用本地浏览器存储方法四(HTML5 LocalStorage sessionStorage)
HTML5 LocalStorage浏览器的支持的情况如上图,IE在8.0的时候就支持了.不过需要注意的是,IE测试的时候需要服务器环境(或者localhost). 测试自然是检测浏览器是否支持本地存 ...
- 【HTML5 localStorage本地储存】简介&基本语法
了解localStorage localStorage是最新的HTML5中的新技术,它主要是用于本地储存.最近看了看localStorage,发现比cookie好多用了,还比cookie简单多了.于是 ...
- HTML5 LocalStorage 本地存储原理详解
首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在 ...
- HTML5 ---localStorage
HTML5中提供了localStorage对象可以将数据长期保存在客户端,直到人为清除. localStorage提供了几个方法: 1.存储:localStorage.setItem(key,valu ...
随机推荐
- Tensorflow之多元线性回归问题(以波士顿房价预测为例)
一.根据波士顿房价信息进行预测,多元线性回归+特征数据归一化 #读取数据 %matplotlib notebook import tensorflow as tf import matplotlib. ...
- 【转】认识JWT
1. JSON Web Token是什么 JSON Web Token (JWT)是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该 ...
- 冒泡排序法(C语言)
冒泡排序(Bubble Sort)一种计算机科学领域的较简单的排序算法.它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果顺序(如从大到小.首字母从从Z到A)错误就把他们交换过来.走访元素的工 ...
- jenkins报错 Host key verification failed.
一.Host key verification failed 问题描述 在本地windows机器上安装了jenkins,在git bash命令行窗口可以使用git pull命令,但是在jenkins ...
- Azure DevOps Server(TFS) 客户端分析
Azure DevOps Server(TFS) 是微软公司的软件协作开发管理平台产品,为软件研发.测试.实施提供全流程的服务.作为一款应用服务器产品,他的客户端是什么,在哪里下载客户端?我们在项目实 ...
- ELK 框架整体流程编写 以及logstash脚本编写
Elasticsearch Elasticsearch 是一个实时的分布式搜索和分析引擎,它可以用于全文搜索,结构化搜索以及分析.它是一个建立在全文搜索引擎 Apache Lucene 基础上的搜索引 ...
- POJ-2006 Litmus Test 高精度
The pH scale measures the concentration of protons (H +) in a solution and, therefore, its acidity o ...
- 分布式中session共享的解决方案:spring-session
Session是客户端与服务器通讯会话跟踪技术,是服务器与客户端保持整个通讯的会话基本信息.客户端在第一次访问服务器的时候,服务端会响应一个sessionId并且将它存入到本地的Cookie中,在之后 ...
- 如何判断服务器之间的服务是否可用?ping 还是 telnet?
1. 背景 机器A需要调用机器B的服务,为此要保证服务的可用性,我们有时候用ping,有时候用telent来验证机器A和B的连通性,但有时候会出现这种情况,A可以ping通B,但A调用B的服务会一直报 ...
- 何谓SQLSERVER参数嗅探(转载)
大家听到“嗅探”这个词应该会觉得跟黑客肯定有关系吧,使用工具嗅探一下参数,然后截获,脱裤o(∩_∩)o .事实上,我觉得大家太敏感了,其实这篇文章跟数据库安全没有什么关系,实际上跟数据库性能调优有关相 ...