每日记录 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应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...
随机推荐
- 数据库_8_SQL基本操作——数据操作
SQL基本操作——数据操作 一.新增数据(两种方案) 方案1: 给全表字段插入数据,不需要指定字段列表,要求数据的值出现的顺序必须与表中设计的字段出现的顺序一致,凡是非数值数据,都需要使用引号(建议是 ...
- python爬虫---实现项目(四) 用BeautifulSoup分析新浪新闻数据
这次只演示了,如何在真实项目内用到BeautifulSoup库来解析网页,而新浪的新闻是ajax加载过来的数据,在这里我们只演示解析部分数据(具体反扒机制没做分析). 代码地址:https://git ...
- selenium-元素的定位
前戏 元素的定位是自动化测试的核心,要想操作一个元素,首先应该识别这个元素.Webdriver 提供了一系列的元素定位方法,常用的有 id,name,class name,link text,part ...
- laydate控件后台返回的时间前台格式化
//功能:laydate控件后台返回的时间前台格式化 //参数:laydate控件值 function formatDate(strTime) { if ("" === strTi ...
- 科普NDIS封包过滤
闲言: 这个月一直在学习NDIS驱动编程,杂七杂八的资料都看个遍了,做了点笔记,捋捋思路,发上来备忘. Ps:只是小菜的一点学习笔记,没什么技术含量,不过版主如果觉得对大家稍微有点帮助的话 ...
- 对于WebAssembly编译出来的.wasm文件js如何调用
WebAssembly也叫浏览器字节码技术 这里就不过多的解释了网上很多介绍 主要是让大家知道在js里面如何调用执行它,我之前看WebAssemblyAPI时候反正是看得一脸懵逼 也是为了大家能更快的 ...
- （50）zabbix API二次开发使用与介绍
zabbix API开发库 zabbix API请求和响应都是json,并且还提供了各种语法的lib库,http://zabbix.org/wiki/Docs/api/libraries,包含php. ...
- touch: cannot touch ‘/var/jenkins_home/copy_reference_file.log’: Permission denied
docker 运行后, 执行docker logs -f myjenkins时报错: touch: cannot touch ‘/var/jenkins_home/copy_reference_fil ...
- sweetalert使用随笔
删除前确认框: //找到删除那天记录的按钮,触发点击事件 $(".del").on('click', function () { swal({ title: "操作确认& ...
- shell基础学习-难点重点学习
来自shell13问 -e : 啟用反斜線控制字符的轉換(參考下表) -E:關閉反斜線控制字符的轉換(預設如此) -n : 取消行末之換行符號(與 -e 選項下的 \c 字符同意) 要取消一個变量,在 ...