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本地存储的更多相关文章

  1. HTML5本地存储——IndexedDB二：索引

    HTML5本地存储——IndexedDB(二:索引)   在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexed ...

  2. HTML5本地存储——IndexedDB（一：基本使用）

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  3. HTML5本地存储——IndexedDB（二：索引）

    在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...

  4. 利用HTML5开发Android(7)---HTML5本地存储之Database Storage

    在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...

  5. 利用HTML5开发Android(4)---HTML5本地存储之Web Storage

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  6. HTML5本地存储之Web Storage应用介绍

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  7. HTML5本地存储之本地数据库篇

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. HTML5本地存储之Web Storage实例篇,最有用的是localStorage

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

随机推荐

  1. python基础面试题整理---从零开始 每天十题（03）

    一.Q:用Python输出一个Fibonacci数列?(斐波那契额数列) A:我们先来看下代码 #!/usr/bin/env python # -*- coding: utf-8 -*- def fi ...

  2. 一. python基础知识

    第一章.变量与判断语句 1.第一个python程序 # -*- coding:utf-8 -*- # Author: Raymond print ("hello world") p ...

  3. 当数据量很少的时候,tableview会显示多余的cell--iOS开发系列---项目中成长的知识二

    当数据量很少的时候,tableview会显示很多的cell,而且是空白的,这样很不美观 所以使用下面的方法可以去掉多余的底部的cell 原理是:设置footerView为frame 是 CGRectZ ...

  4. uilabel自动换行

    NSString *str = @"我是一asdf我是一我是一我是一我是一我是一我是一我是一我是一我是一我是一我是一asdf我是一asdf我是一asdf我是一asdf我是一asdf我是一as ...

  5. Java--泛型理解和使用 （List<String> list = new ArrayList<String>(); ）

    List<String> list = new ArrayList<String>(); 第一次看到这行代码是一头雾水,查了好久才弄清楚这是什么东西,怎么用,所以记录下来,方便 ...

  6. Python自动化测试框架——数据驱动（从代码中读取）

    今天小编要介绍的是数据驱动最简单和最常用的一种方法,由于只是介绍方法,代码操作后的美观程度略有缺陷,介意者可以自行改动 还是以163邮箱登录为例: 设计一个存放数据的类,这个类的参数是我们需要修改的数 ...

  7. 如何用纯 CSS 创作一个永动的牛顿摆

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKmGaJ 可交互视频教 ...

  8. 【HIHOCODER 1067】最近公共祖先·二（LCA）

    描述 上上回说到,小Hi和小Ho用非常拙劣--或者说粗糙的手段山寨出了一个神奇的网站,这个网站可以计算出某两个人的所有共同祖先中辈分最低的一个是谁.远在美国的他们利用了一些奇妙的技术获得了国内许多人的 ...

  9. python 四——线程、进程、协程

    内容概要 1.进程与线程优.缺点的比较 2.适用情况 3.线程 线程的创建 setDaemon join event RLock 队列 4.进程 创建进程 setDaemon join 线程与进程,数 ...

  10. Linux基础命令详解-3

    本篇详解的命令有以下15个 1.chown 更改文件和文件夹的用户和组所有权 2.useradd 创建一个新用户 3.userdel 删除一个用户 4.usermod 修改用户帐户 5.echo 打印 ...