每日记录 2016-4-29 HTML5本地存储
HTML5本地存储
一、HTML5 localStorage
在HTML5中，本地存储是一个window的属性，包括localStorage和 sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同。
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。localStorage有三种设置和访问本地存储的方法。
localStorage.t1 ="大碗干拌";
localStorage["t2"]="HTML5";
localStorage.setItem("t3","http://blog.csdn.net/dawanganban");
localStorage.t1;
localStorage["t2"];
localStorage.getItem("t3");
<!DOCTYPE HTML>
<html>
<head>
<meta charset="urf-8"/>
</head>
<body>
<script type="text/javascript">
//判断浏览器是否支持本地存储 if(window.localStorage){
localStorage.t1="大碗干拌";
document.write(localStorage.t1); localStorage['t2']="<br/>hello word"
document.write(localStorage.t2); localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");
document.write(localStorage.t3);
}else{
alert("你的浏览器不支持");
} </script>
</body>
</html>将上面三行赋值的代码注释掉，会发现数据依然能显示到浏览器上。
localStorage处理上面的赋值取值外还有下面几个用法：
localStorage.removeItem(); //清除
localStorage.clear() //清除所有
localStorage.length //获得多少键
localStorage.key() //获得存储的键内容
<!DOCTYPE HTML>
<html>
<head>
<meta charset="urf-8"/>
</head>
<body>
<script type="text/javascript">
//判断浏览器是否支持本地存储 if(window.localStorage){
//先清除一下
localStorage.clear(); localStorage.t1="大碗干拌";
document.write(localStorage.t1); localStorage['t2']="<br/>hello word"
document.write(localStorage.t2); localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");
document.write(localStorage.t3); //清除t2 全部清除用clear
localStorage.removeItem("t2"); for(var i=0;i<localStorage.length;i++){
document.write("<br/>" + localStorage.key(i) + "___"+localStorage.getItem(localStorage.key(i)));
} }else{
alert("你的浏览器不支持");
}
</script>
</body>
</html>
每日记录 2016-4-29 HTML5本地存储的更多相关文章
- HTML5本地存储——IndexedDB二：索引
HTML5本地存储——IndexedDB(二:索引) 在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexed ...
- HTML5本地存储——IndexedDB（一：基本使用）
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- HTML5本地存储——IndexedDB（二：索引）
在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...
- 利用HTML5开发Android(7)---HTML5本地存储之Database Storage
在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...
- 利用HTML5开发Android(4)---HTML5本地存储之Web Storage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- HTML5本地存储之Web Storage应用介绍
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- HTML5本地存储之本地数据库篇
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...
- HTML5本地存储之Web Storage实例篇,最有用的是localStorage
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5本地存储(Local Storage) 的前世今生
长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...
随机推荐
- CAD交互绘制批注（网页版）
js中实现代码说明: 动态拖放时的绘制事件: function DynWorldDrawComment( pCustomEntity, pWorldDraw, curPt) { // 得到绘制参数. ...
- 【Codeforces #228】Solutions
http://codeforces.com/contest/389 重新把号刷到Div 1 准备ACM?(我这么菜还是玩玩算了……) 官方题解出的很快 Div2 A: 怎么做都行……随便找俩数减就可以 ...
- Java形式参数和返回值的问题
形式参数和返回值的问题 (1).形式参数: A.类名:需要该类的对象. B.抽象类名:需要该类的子类对象. C.接口名:需要该接口的实现类对象. A.类名作为形式参数 class Student { ...
- 什么是无符号段整数,什么又是有符号数,（c++与java语言里边的不同）
c++中:整型数分为有符号数和无符号数两种 unsigned int a;无符号整型变量a,意思是这个数最小值为0,最大值为2的32次方-1,因为一个整型数占四个字节,一个字节8位,共32位 int ...
- Xcode 6 创建 Empty Application
1.创建一个 Single View Application: 2.删除工程目录下的 Main.storyboard 和 LaunchScreen.xib: 3.打开 Supporting Files ...
- 更新portage之后 安装 certbot
运行的时候一直报如下的错误: sudo certbot 错误结果: Traceback (most recent call last): File "/usr/lib/python-exec ...
- 如何快速获取当前链接？后面的内容，location.search、页面滚动
function request() { var urlStr = location.search; ) { theRequest={}; return; } urlStr = urlStr.subs ...
- RESTful API批量操作的实现
要解决的问题 RESTful API对于批量操作存在一定的缺陷.例如资源的删除接口: DELETE /api/resourse/<id>/ 如果我们要删除100条数据怎么搞?难道要调用10 ...
- C++中 #ifdef 和#endif的作用
一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一部分内容指定编译的条件,这就是"条件编译".有时,希望当满足某条件时对一组 ...
- java null 空指针
对于Java程序员来说,null是令人头痛的东西.时常会受到空指针异常(NPE)的骚扰.连Java的发明者都承认这是他的一项巨大失误.Java为什么要保留null呢?null出现有一段时间了,并且我认 ...