【html5】html5 本地存储,html5存储

曾经在校期间,作为一个还没有入行的小菜鸟,只知道JavaScript的语句可以操作DOM元素,可以为HTML的元素添加各种各样的事件,以丰富网页的交互能力。工作以后,作为一个刚入行的小菜鸟,才知道了JavaScript也是可以实现面向对象编程。

【html5】html5 本地存储,html5存储

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

在面向对象中,最重要的概念就是什么是对象,其他的一切都是围绕着这个对象来展开。

在客户端存储数据

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

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

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

在一次的工作中,因业务需要要用到localStorage(本地存储),就想抱着学习的态度,对其进行简单的封装,以熟悉JavaScript中面向对象的性质。

为什么要用本地存储

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

作为工具类,我首先想到了单例模式。

localStorage 方法

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

localStorage.pageLoadCount = 1;

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

澳门新葡亰网站注册 1

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

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

以下是结果:

澳门新葡亰网站注册 2

当然 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 本地存储

单例模式(Singleton)整个运行期间只会被初始化一次,即只有一个对象。该模式简单易懂,运用也很广泛。可以用它来聚合公共的方法,形成一个工具类,对外提供api。

怎设置html5本地存储

可以使用 JavaScript 来访问 HTML5 Storage,通过全局的 window 对象的
localStorage 对象。在我们使用之前,我们需要首先检测是否可用:

function supports_html5_storage() {
try {
return ‘localStorage’ in window && window[‘localStorage’]澳门新葡亰网站注册, !== null;
} catch (e) {
return false;
}
}

HTML5 Storage
基于键值对存储。你要存储的数据需要有一个名字作为键,然后你就可以使用这个键读取这个数据。这个键是一个字符串;数据则可以是
JavaScript
支持的任何数据类型,包括字符串、布尔值、整数和浮点数。但是,我们通常将数据作为字符串进行存储。如果你存储读取非字符串数据,你就得使用类似
parseInt() 或者 parseFloat() 这样的函数,将读取的数字转换成所需要的
JavaScript 数据类型。

var foo = localStorage.getItem(“bar”);
// …
localStorage.setItem(“bar”, foo);
也可以写成:

var foo = localStorage[“bar”];
// …
localStorage[“bar”] = foo;
 

单例的实现

对于html5 的 LocalStorage 本地存储

以下是五大浏览器localStorage存储方式:

除了Opera浏览器采用BASE64加密外(BASE64也是可以轻松解密的),其他浏览器均采用明文存储数据。
所以,建议不要使用localStorage方式存储敏感信息,那怕这些信息进行过加密。

以上参考《HTML5 本地存储 localstorage 安全分析》
blog.csdn.net/… 

澳门新葡亰网站注册 3
 

本地存储,html5存储 最近一直在学习
html5,为了后期的移动项目进行知识储备。html5 相对于 html4
新增加了一些有趣的标签、属…

回想java中的基本的单例:

classSingleton{privateSingletonINSTANCE;privateSingleton(){//privateconstructor}publicSingletongetInstance(){if(this.INSTANCE==NULL){this.INSTANCE=newSingleton();}returnthis.INSTANCE;}}

其组成要素有三点:

私有的自对象引用private Singleton INSTANCE;

私有的构造函数private Singleton(){}

公开的自对象引用获取方法public Singleton getInstance(){}

同样的,在JavaScript中单例模式也应该包含这三点要素。因此,一个基本的JavaScript单例模式结构如下:

varSingleton=(function(){//privateInstancevar_instance=null;//privateconstructorvar_Constructor=function(){console.log(JavaScriptSingleton);}//publicgetInstancereturn{getInstance:function(){if(_instance==null){_instance=new_Constructor();}return_instance;}}}());

可以看出,虽然语法上与java的单例有很大的不同,但是结构上还是可以明确的体现出单例模式的三点要素。

本地存储

在HTML5之前,客户端存储通常是由cookie完成的。但是
cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得
cookie 速度很慢而且效率也不高。

到了HTML5的时代,很高兴有了很多的新方法来向客户端存储数据,这里即用到LocalStorage。