澳门新葡萄京娱乐场【html5】html5 本地存储,html5存储

操作localStorage

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

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

具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案。
cookie机制。正统的cookie分发是通过扩展HTTP协议来实现的,服务器通过在HTTP的响应头中加上一行特殊的指示以提示
浏览器按照指示生成相应的cookie。然而纯粹的客户端脚本如JavaScript或者VBScript也可以生成cookie。而cookie的使用
是由浏览器按照一定的原则在后台自动发送给服务器的。浏览器检查所有存储的cookie,如果某个cookie所声明的作用范围
大于等于将要请求的资源所在的位置,则把该cookie附在请求资源的HTTP请求头上发送给服务器。
Web应用程序中还经常使用Session来记录客户端状态。Session是服务器端使用的一种记录客户端状态的机制,使用上比Cookie简单一些,相应的也增加了服务器的存储压力。
localStorage
方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

另外需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。

为什么要用本地存储

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

var retrievedObject = localStorage.getItem(‘testObject’);

本地存储

在客户端存储数据

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

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

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

LOCALSTORAGE

window.localStorage.a=a;//设置a的值为awindow.localStorage[a]=str;//设置a的值为str,并覆盖上面的值vara=window.localStorage.a;//取得a的值varb=window.localStorage[a];//取得a的值

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

SessionStorage, LocalStorage,
Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对!。
区别在于前两者属于WebStorage,创建它们的目的便于客户端存储数据。
而Cookie早在网景公司的浏览器中就开始支持,最初目的是为了保持HTTP的状态。

根据业务背景:

怎设置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;
 

// Put the object into storage//返回与指定值相对应的一个JSON字符串,

单例的实现

对于html5 的 LocalStorage 本地存储

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

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

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

澳门新葡萄京娱乐场 3
 

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

8.更多讨论

同时,通过json的使用,就可以将它的存储类型扩展至对象。

每个 HTTP 请求中都包含 Cookies,从而导致传输相同的数据减缓我们的 Web
应用程序。

回想java中的基本的单例:

// Retrieve the object from storage

有a,b,c,d,e五组数据,每组数据为一个Array,即arrA,arrB,arrC,arrD,arrE。需要将这五组数据存入后台,为了防止页面刷新数据丢失,将他们暂存进本地存储,待数据编辑操作完后统一提交至后台。

localStorage[“a”]=1;

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

8.更多讨论

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

varretrievedObject=localStorage.getItem(‘testObject’);

它以键值对的方式存储,读写数据的方式很简单,给window.localStorage添加属性即可。如下:

// Retrieve the object from storage

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

Window.sessionStorage – Web API 接口 |
MDN

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

//存储

获取localStorage

localStorage可以在多个标签页中互相访问用于持久化的本地存储,可以在多个标签页中互相访问,除非主动删除数据,否则数据是永远不会过期的。

使用单例模式对LocalStorage简单的封装

COOKIE?

总结

4.解决方案

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

5.编码实战

varStorage=(function(){//私有的自对象引用this._storage=null;//私有的构造方法varStorage=function(){//判断浏览器是否支持本地存储if(!window.localStorage){alert(当前浏览器不支持本地存储!)}this.storage=window.localStorage;this.valueArr=null;}//开放的API调用Storage.prototype={get:function(scope){//获取scope的值varvalues=JSON.parse(this.storage.getItem(scope));returnvalues;},set:function(scope,value){//将value存入scopeif(!this.has(scope)){this.valueArr=newArray();}else{this.valueArr=this.get(scope);}this.valueArr.push(value);this.save(scope);},update:function(scope,key,value){//更新scope的值this.valueArr=this.get(scope);this.valueArr[key]=value;this.save(scope);},delete:function(scope,key){//删除scope的第key个值this.valueArr=this.get(scope);this.valueArr.splice(key,1);this.save(scope);},save:function(scope){//保存scope到本地存储器this.storage.setItem(scope,JSON.stringify(this.valueArr));},clear:function(){//清除本地存储器if(this.storage)this.storage.clear();},hasRecord:function(){//判断本地存储器是否有记录console.log(this)if(this.storage.length0)returntrue;elsereturnfalse;},has:function(scope){//判断本地存储器是否有名为scope的记录varvalues=this.get(scope);if(values!=null){returntrue;}else{returnfalse;}},isEmpty:function(scope){//判断本地存储器名为scope的记录是否为空varvalues=this.get(scope);if(values.length==0){returntrue}else{returnfalse;}}}//暴露的自对象引用获取方法return{getInstance:function(){if(this._storage==null){this._storage=newStorage();}returnthis._storage;}}}())

4.解决方案

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

LOCALSTORAGE

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

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

但通常,更推荐的方法是:

6.扩展思考

首先,localStorage是window的一个属性,我们可以使用window.localStorage来获取它。但是只有在HTML5中才得到支持,因此我们需要判断浏览器是否支持。

7.参考文献

在JavaScript中面向对象的特性还有很多,并不像以前那些粗浅的认识,因此以后的工作生活中还需要学习更多。

6.扩展思考

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

Cookies 只能存储有限的 4KB 数据,对于复杂的存储需求来说是不够用的。

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

【SESSIONSTORAGE, LOCALSTORAGE, COOKIE】

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

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

了解了上述的两个基本知识,就可以着手对localstorage进行简单的封装,以便理解掌握这些知识。

5.编码实战

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

每个 HTTP 请求中都包含
Cookies,从而导致发送未加密的数据到互联网上。(除非用HTTPS)

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

localStorage.getItem(‘key’);// => ‘value’

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

2.知识剖析

得到Storage.js

HTML5本地存储:SessionStorage, LocalStorage,
Cookie

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

分享人:庄引

varstorage=window.localStorage;storage.setItem(a,str);//设置a的值为strstorage.getItem(a);//获取a的值storage.removeItem(a);//删除a的值storage.clear();//清空localStoragevarindex=0;storage.key(index);//根据索引获取值

1.背景介绍

其组成要素有三点:

HTML5 引入了两种机制,类似于 HTTP 的会话
cookies,用于在客户端存储结构化数据以及克服以下缺点。 这两种存储方式是
session storage 和 local storage,它们将用于处理不同的情况。
几乎所有最新版的浏览器都支持 HTML5 存储,包括 IE 浏览器。

if(!window.localStorage){alert(Thisbrowser`DONT`supportlocalStorage!);}

localStorage.removeItem(‘key’);

vartestObject={‘one’:1,’two’:2,’three’:3};

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

//清除单个存储

COOKIE主要用在以下三个方面:

Window.localStorage – Web API 接口 |
MDN

localStorage.setItem(‘testObject’, JSON.stringify(testObject));

Window.localStorage – Web API 接口 |
MDN

COOKIE的缺陷

localStorage.getItem(‘key’);     // => ‘value’

//存储

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。
不会被发送到服务器上。同时空间比Cookie大很多,一般支持5-10M。
与Cookie类似,每个域名下会有不同的localStorage和SessionStorage实例。

sessionStorage 属性允许你访问一个 session Storage 对象。它与
localStorage 相似,不同之处在于 localStorage
里面存储的数据没有过期时间设置,而存储在 sessionStorage
里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话,这点和
session cookies 的运行方式不同。

在客户端存储数据,COOKIE和WEBSTORAGE哪种存储更加安全?

//取值

在客户端存储数据,COOKIE和WEBSTORAGE哪种存储更加安全?

localStorage.clear();

console.log(‘retrievedObject: ‘, JSON.parse(retrievedObject));

具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案。
cookie机制。正统的cookie分发是通过扩展HTTP协议来实现的,服务器通过在HTTP的响应头中加上一行特殊的指示以提示
浏览器按照指示生成相应的cookie。然而纯粹的客户端脚本如JavaScript或者VBScript也可以生成cookie。而cookie的使用
是由浏览器按照一定的原则在后台自动发送给服务器的。浏览器检查所有存储的cookie,如果某个cookie所声明的作用范围
大于等于将要请求的资源所在的位置,则把该cookie附在请求资源的HTTP请求头上发送给服务器。
Web应用程序中还经常使用Session来记录客户端状态。Session是服务器端使用的一种记录客户端状态的机制,使用上比Cookie简单一些,相应的也增加了服务器的存储压力。
localStorage
方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后(关闭标签页,不包括刷新和跳转)数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

小课堂【武汉第156期】

7.参考文献

localStorage.setItem(‘key’, ‘value’);

因为它只能存储字符串,要存JSON只能序列化为字符串:

3.常见问题

注意SessionStorage中的Session指的是浏览器会话,而非服务器端通过Cookie实现的Session。

Window.sessionStorage – Web API 接口 |
MDN

1.背景介绍


浏览器行为跟踪(如跟踪分析用户行为)

//将一个字符串解析为JSON

localStorage.setItem(“c”,3);

3.常见问题

感谢观看

个性化设置(如用户自定义设置)

localStorage.b=2;

console.log(‘retrievedObject: ‘,JSON.parse(retrievedObject));

4.解决方案

问题:COOKIE是如何工作的?

6.扩展思考

6.扩展思考

SESSIONSTORAGE

5.编码实战

会话状态管理(如用户登录状态、购物车)

//清除所有

STORAGE的使用

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧
!http://www.jnshu.com/login/1/86157900

//取值

HTTP Cookie(也叫Web
cookie或者浏览器Cookie)是服务器发送到用户浏览器并保存在浏览器上的一块数据,它会在浏览器下一次发起请求时被携带并发送到服务器上。比较经典的,可以它用来确定两次请求是否来自于同一个浏览器,从而能够确认和保持用户的登录状态。Cookie的使用使得基于无状态的HTTP协议上记录稳定的状态信息成为了可能。

目录

LocalStorage/SessionStorage也是基于字符串的键值对存储。可以通过setItem,getItem,clear,removeIteml来存取控制数据:

技能树.IT修真院

//将一个字符串解析为JSON

localStorage.setItem(“c”,3);//清除所有localStorage.clear();

编辑:庄引

localStorage 属性允许你访问一个 local Storage 对象。localStorage 与
sessionStorage 相似。不同之处在于,存储在 localStorage
里面的数据没有过期时间(expiration time),而存储在 sessionStorage
里面的数据会在浏览器会话(browsing
session)结束时被清除,即浏览器关闭时。

2.知识剖析

HTML5本地存储:SessionStorage, LocalStorage,
Cookie

HTML5本地存储:SessionStorage, LocalStorage,
Cookie

Window.sessionStorage – Web API 接口 |
MDN

因为它只能存储字符串,要存JSON只能序列化为字符串:

Window.localStorage – Web API 接口 |
MDN

localStorage.setItem(‘testObject’,JSON.stringify(testObject));

var testObject = { ‘one’: 1, ‘two’: 2, ‘three’: 3 };

localStorage.setItem(‘key’,’value’);

localStorage[“a”]=1;

localStorage.b=2;

localStorage.removeItem(‘key’);

HTML5 引入了两种机制,类似于 HTTP 的会话
cookies,用于在客户端存储结构化数据以及克服以下缺点。 这两种存储方式是
session storage 和 local storage,它们将用于处理不同的情况。
几乎所有最新版的浏览器都支持 HTML5 存储,包括 IE 浏览器。

5.编码实战

7.参考文献

localStorage 属性允许你访问一个 local Storage 对象。localStorage 与
sessionStorage 相似。不同之处在于,存储在 localStorage
里面的数据没有过期时间(expiration time),而存储在 sessionStorage
里面的数据会在浏览器会话(browsing
session)结束时被清除,即浏览器关闭时。

Cookie可用于客户端数据的存储,在没有其它存储办法时,使用这种方式是可行的,但随着现在浏览器开始支持各种各样的存储方式而逐渐被废弃。由于服务器指定Cookie以后浏览器的每次请求都会携带Cookie数据,这会带来额外的性能负担(尤其是在移动环境下)。新的浏览器API已经允许开发者直接在本地存储数据,如可以使用Web
storage API (本地存储和会话存储)和IndexedDB。

// Put the object into storage//返回与指定值相对应的一个JSON字符串,

LOCALSTORAGE和SESSIONSTORAGE?

//清除单个存储

发表评论

电子邮件地址不会被公开。 必填项已用*标注