【html5】html5 本地存储

最近一直在学习 html5,为了后期的移动项目进行知识储备。html5 相对于 html4 新增加了一些有趣的标签、属性和方法,今天主要介绍下 html5 的本地存储。

在客户端存储数据

html5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对 session 的数据存储,一旦窗口关闭就没有了

两个方法用法完全一样,下面就以 localStorage 为例。

为什么要用本地存储

早期我们都是使用 cookie 来完成的,但是 cookie 不适合大量的数据存储,也就是说它太小,只有 4k 的样子,而且速度慢效率低。

localStorage 方法

那么我们该如何添加数据呢?很简单,就像给对象添加属性一样:

localStorage.pageLoadCount = 1;

可以通过浏览器的控制台来查看是否有存储数据:

同样读取和修改数据也很方便:

console.log(localStorage.pageLoadCount);    //读取
localStorage.pageLoadCount = 10;            //修改
console.log(localStorage.pageLoadCount);    //读取

以下是结果:

当然 localStorage 本身自带一些方法及属性,具体如下:

localStorage.clear();                       //清除所有的存储数据
localStorage.getItem(‘pageLoadCount‘);      //读取存储数据,返回值 "10",等同于 localStorage.pageLoadCount
localStorage.key(0);                        //获取存储数据的 key,返回值 "pageLoadCount"
localStorage.length;                        //获取存储数据的长度
localStorage.removeItem(‘pageLoadCount‘);   //删除特定的存储数据
localStorage.setItem(‘name‘,‘Jack‘);        //新增加一个存储数据,等同于 localStorage.name = ‘Jack‘;

需要注意的是:读取存储数据的时候,返回的是字符串,无论之前存的是什么,最后读取的都是字符串,所以读取的时候需要进行类型转换。

最后附上 localStorage 应用的 demo:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>localStorage</title>
</head>
<body>
    <p id="p"></p>
</body>
</html>
<script>
window.onload = function(){
    if(!localStorage.pageLoadCount) localStorage.pageLoadCount = 0;
    localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
    document.getElementById(‘p‘).innerHTML = ‘浏览次数:‘ + localStorage.pageLoadCount + ‘ 次。‘;
}
</script>

参考资料:

HTML 5 Web 存储

HTML5 LocalStorage 本地存储

【html5】html5 本地存储

时间: 2024-10-29 19:11:55

【html5】html5 本地存储的相关文章

HTML5 localStorage本地存储实际应用举例

HTML5 localStorage本地存储实际应用举例 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1952 一.引言 HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性.就我所做的项目而言,应用的HTML5相关特性有:data-自定义属性.placeholder.以及email类型input文本框.上周新上线的会员中心,自己又

利用html5的本地存储写的一个购物车

好久没有写博客园了,很多知识没有记录下来:可惜: 这几天在开发微信,也写了一个订餐平台的微网站,里面需要写一个购物车: 这里主要是把商品的部分信息以json格式保存在sessionstorage中,还有商店信息也是: 以json格式保存有什么好处呢,轻量级的传输,大概是这样吧!另外,如果我们把商品信息分开存储,就会导致有多条的sessionstorage项,那以后实现在两家商店同时购物的话,就不可能区分每家商店的商品了: 如果代码是自己写的,就有版权,这么说.对吧,是在软件工程师书上看到的: 不

利用html5的本地存储功能实现登录用户信息保存

在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了.二者用法完全相同,这里以localStorage为例. 用户名.密码保存,自动登录等,可以通过设置cookie实现,第一次登录网站后在本地计算机的中写入cookie,之后再次登录此网站查看cookie中现有的值,用cookie值进行网站登录即可.但是 cookie 不适合大量数据

html5的本地存储

正好刚刚写了javaweb的session存储,反正还早....就把html5的本地存储一块写了吧 cookie 在说html5的本地存储之前,不得不说下在它之前的本地存储cookie. cookie存储在浏览器端,并且会随着浏览器的请求一起传到服务器段,它有一定的过期时间,到了过期时间会自动消失. 小伙伴么可以打开浏览器自己看一下 默认生命周期是浏览器关闭.当然你任性,也可以自己设置 1 Response.Cookies(name).Expires = Date +1; (时间函数+N) ja

HTML5 LocalStorage 本地存储总结

//存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"].它的读取.写.删除操作方法很简单,是以键值对的方式存在的,如下: localStorage.a = 3;//设置a为"3"localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值local

HTML5 LocalStorage 本地存储(转)

原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存在了

HTML5 localStorage本地存储

介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2. 成员 2.1 属性 2.2 方法 2.3 事件 3. 示例 3.1 存储数据 3.2 读取数据 3.3 存储Json对象 1. 介绍 1.1 说明 localStorage 即本地存储,可用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. 在JavaScript语言中可通过 wi

(转载)HTML5 LocalStorage 本地存储

原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存

Html5 web本地存储

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

HTML5 LocalStorage 本地存储原理详解

首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了.二者用法完全相同,这里以localStorage为例. if(window.localstorage){ alert('this brower supports localstorage'); }else{ alert('this browe