[HTML5] 数据存储

HTML5 使用 JavaScript 来存储和访问数据

数据存储:

浏览器支持:主流全部支持(“IE 8.0”、“Chrome 4.0”、“Firefox 4.0”、“Safari 4.0”、“Android 3.0”、“iOS 5.0”);

最高大小:5M;

形式:

LocalStorage:本地存储,存储的数据没有时间限制:

<script type="text/javascript">
  localStorage.lastname="Smith";
  document.write(localStorage.lastname);
</script>

SessionStorage:服务器存储,当用户关闭浏览器窗口后,数据会被删除:

<script type="text/javascript">
  sessionStorage.lastname="Smith";
  document.write(sessionStorage.lastname);
</script>

存储常用API(仅能操作字符串):

setItem(key, value) 为 Web 存储对象添加一个键/值对,供以后使用。该值可以是任何的数据类型:字符串、数值、数组等。
JSON.stringify 将数组存储为字符串
变量试存、调 以变量的使用方式来使用。(localStorage.name = ‘content‘;)
getItem(key) 对起初用来存储它的这个键检索值。
removeItem(key) 删除key所代表的键/值
clear() 清除所有的键/值对。
key(n) 检索 key[n] 的值。

JSON.stringify使用方式:

var myArray = new Array(‘First Name‘, ‘Last Name‘, ‘Email Address‘);
localStorage.formData = JSON.stringify(myArray);

最后的提示:

  1. Internet Explorer 8+、Opera 10.5+、Firefox 3.5+、Safari 4+ 和 Chrome 均包括了一个本地的 JSON 对象,对于版本更低的浏览器,可以下载一个json2.js文件:http://www.json.org/
  2. HTML5带来了新存储方式,但对于互联网安全来说,它仍然与Cookie、Session等存储方式一样,是脆弱而不安全的。
时间: 2024-12-25 12:13:55

[HTML5] 数据存储的相关文章

HTML5数据存储

介绍两种对象使用方法: sessionStorage方法如果关闭了浏览器,这个保存的数据就丢失. 1.sessionStorage 保存数据:sessionStorage.setItem(key,value); 读取数据:sessionStorage.getItem(key); localStorage则是浏览器被关闭,下次在打开浏览器浏览这个页面点击读取数据时任然能读取到保存的数据. 注*这个数据是区分浏览器的,在别的浏览器中是读取不到这个浏览器保存的数据的. 2.localStorage 保

HTML5数据存储方案data与jQuery数据存储方案$.data()的区别

我们先看下$.fn.data()的使用,这个和$.data()是不一样的,前者是和某个jquery对象相关,后者则是全局方法.主要有data()和removeData()这2个实例方法.通过下面的例子和执行结果可以看到:$.fn.data()和$.fn.removeData()跟$.data的使用方式没有什么差别. // 支持任何数据类型 2. $( "body" ).data( "name", "xx" ); 3. $( "body&

基于 HTML5 的数据存储

以前想做个静态网页APP.最初的思路是用本地文件存储数据,后来发现在手机上运行时,文件无法找到. 经过了长达几个月的搜索(实际也就几天),没有找到合适的方法. 就在绝望的时候,无意间搜到基于HTML5的各种保存数据的方法.在此简单与大家分享一下. 前四种是从http://www.hightopo.com/blog/344.html截取. Cookie 最古老的存储方式为Cookie,这种存储方式存储内容很有限,只适合做简单信息存储,存取接口设计得极其反人类,为了介绍HTML5存储方案的完整性我顺

html5 之本地数据存储

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 cookie与webStorage的对比: cookie的缺陷是非常明显的 1. 数据大小:作为存储容器,cookie的大小限制在4KB左右这是非常坑爹的,尤其对于现在复杂的业务逻辑需求,4KB的容量除了存储一些配置字段还简单单值信息,对于绝大部分开发者来说真的不知指望什么了. 2. 安全性问题:由于在HTTP请求中的co

Html5——WEB(客户端)数据存储

在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高. 在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据.它使在不影响网站性能的情况下存储大量数据成为可能. 对于不同的

HTML5深入学习之数据存储

概述 本来,数据存储都是由 cookie 完成的,但是 cookie 不适合大量数据的存储,cookie 速度慢且效率低. 现在,HMLT5提供了两种在客户端存储数据的办法: localStorage(没有时间限制的数据存储,即当我们设置了之后浏览器关闭后再去访问它依然存在) sessionStorage(针对一个session的数据存储,当我们设置了之后浏览器关闭后再去访问他就消失了) 两者之间的实测对比 localStorage 首先我们先运行这段代码: localStorage.setIt

HTML5本地存储 localStorage

HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: localStorage.setItem('a', 'xxxxxx'); // 设置 localStorage.getItem('a'); // 获取 localStorage.removeItem('a'); // 删除 下面说说有关localStorage和sessionStorage的特性. 1

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

在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌入式设备上,熟悉IOS/Android开发的同学,应该对SQLite数据库比较熟悉. HTML5中的数据库操作比较简单,主要有如下两个函数: 1.通过openDatabase

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

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB. Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了:而localStorage则一直将数据保存在客户端本地: 不管