使用本地存储,web应用可以在用户浏览器中本地存储数据。

在HTML5之前,应用数据存储必须使用cookie,包括每个服务端的请求,本地存储更加安全,并且可以存储大量的数据到本地,不影响网站的性能。

和cookie不同的是,本地存储存储的数量很大(至少5MB)并且信息从来不会被传输到服务器端。

本地存储存储在域名和接口组成的网址下面,同一个网址下面可以相互获取信息。

浏览器支持

API chrome  edge IE  firefox   Safari opera 
Web Storage 4.0 12.0 8.0 3.5 4.0 11.5

HTML本地存储对象

HTMNL本地存储在客户端对象提供了两个用于存储数据的对象:

  • window.localStorage - 存储数据没有截止日期
  • window.sessionStorage - 存储数据(当浏览器关闭的时候它也死掉了)

在使用本地存储之前,记得要用浏览器检测本地存储的兼容性:

if(typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

下面会写polyfill,实际上就是利用cookie来仿本地存储,在最下面~

localStorage对象

localStorage对象是木有期限的,就算你关闭了浏览器它还是一直存在不离不弃,可以在明天,亦或下个星期,亦或明天使用

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

例子解释:

  • 创建了localStorage的键对值: name="lastname" 和value="Smith"
  • 获取localStorage中lastname的值,并赋值给id为result的元素。

上面的例子也可以写成下面的样式:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

去除localsto中个“lastname”中的项目的语法如下:

localStorage.removeItem("lastname");

方法汇总

   if(!localStorage.username){
name=prompt("What is your name?");
localStorage.username=name;
}
console.log(localStorage["username"]); localStorage.setItem("x",1);//以"x"的名字存储一个数值
localStorage.getItem("x");//获取数值 //枚举所有存储的名字/值对
for(var i=0;i<localStorage.length;i++){ //length表示了所有名字/值对的总数
var name=localStorage.key(i); //获取第i对名字,key在不知道键值的时候使用棒棒哒!
var value=localStorage.getItem(name); //获取该对的值
} localStorage.removeItem("x"); //删除x项
localStorage.clear(); //全部删除

Note: 我们可以存储任何的数据类型,但是键对值总是被存储为string的形式(浏览器仅仅支持存储string类型的数据),所以,如果想存储和获取其他类型的数据,记得将数据进行编码和解码

 /*
* 和cookie比较的好处
* 1. 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。 2. 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。 3. 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。 4. 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。 但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生 ① cookie大小限制在4k左右,不适合存业务数据
② cookie每次随HTTP事务一起发送,浪费带宽 ① localstorage大小限制在500万字符左右,各个浏览器不一致
② localstorage在隐私模式下不可读取
③ localstorage本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存,想想就觉得吓人啊)
④ localstorage不能被爬虫爬取,不要用它完全取代URL传参
* */
//当存储一个数字的时候,会把它自动转换成一个字符串
//但是,当获取该值的时候,不要忘记手动将其转换成数字类型
localStorage.x=10;
var x=parseInt(localStorage.x);
//存储一个日期类型数据时进行编码,获取时候进行解码
localStorage.lastRead=(new Date()).toUTCString();
var lastRead=new Date(Date.parse(localStorage.lastRead));
//使用JSON可以使得对基本数据类型编码工作变得非常方便
localStorage.data=JSON.stringify(data);
var data=JSON.parse(localStorage.data);

触发的事件

//storage事件,对键值的改变进行监听 setItem()中触发
if(window.addEventListener){ //通用浏览器
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){ //IE浏览器
window.attachEvent("onstorage",handle_storage);
}
//storage 的event的属性有:key,newValue,oldValue,storageArea,url
function handle_storage(e){
if(!e) e=window.event;
//你的处理函数!
}

sessionStorage对象

sessionStorage对象和localStorage对象基本一样,除了生命周期不一样:当特定的浏览器关闭的时候,sessionStorage中个data也死翘翘了。

在低浏览器中模拟本地对象:

if (!window.localStorage) {
window.localStorage = {
getItem: function (sKey) {
if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
},
key: function (nKeyId) {
return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
},
setItem: function (sKey, sValue) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
this.length = document.cookie.match(/\=/g).length;
},
length: 0,
removeItem: function (sKey) {
if (!sKey || !this.hasOwnProperty(sKey)) { return; }
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
this.length--;
},
hasOwnProperty: function (sKey) {
return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
}
};
window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}

下面是一个复杂的方法 :

if (!window.localStorage) {
window.localStorage = {
getItem: function (sKey) {
if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
},
key: function (nKeyId) {
return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
},
setItem: function (sKey, sValue) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
this.length = document.cookie.match(/\=/g).length;
},
length: 0,
removeItem: function (sKey) {
if (!sKey || !this.hasOwnProperty(sKey)) { return; }
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
this.length--;
},
hasOwnProperty: function (sKey) {
return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
}
};
window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}

上面实际上都是在操作cookie用来模拟本地存储,所以上面能够存储的最大数据时受到cookie的影响的。上面的代码中,使用localStorage.getItem()localStorage.setItem(), 和 localStorage.removeItem() 来获取,设置和删除key是允许的,但是localStorage.yourKey方法来获取删除设置一个key是不被允许的。

当然,你也可以直接操作cookie。

如果将字符串 "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" 改变成 "; path=/" (并且改变对象的名字), 那么将变成sessionStorage 的polyfill而不是lcoalStorage的polyfill。然而,这样的实现将会跨浏览器分享存储的数据(只有全部的windows中的所有浏览器都关闭的时候才会清楚),然而真正的sessionStorage中的数据只能在当前浏览器环境中共享数据的。

Local storage htm5的更多相关文章

  1. Ionic2学习笔记(8):Local Storage& SQLite

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html              Ionic2可以有两种方式来存储数据,Local S ...

  2. Web持久化存储Web SQL、Local Storage、Cookies(常用)

    在浏览器客户端记录一些信息,有三种常用的Web数据持久化存储的方式,分别是Web SQL.Local Storage.Cookies. Web SQL 作为html5本地数据库,可通过一套API来操纵 ...

  3. cookie ,session Storage, local storage

    先来定义: cookie:是网站为了标识用户身份存储在本地终端的数据,其数据始终在APP请求中存在,会在服务器和浏览器中来回传递 数据大小不超过4k, 可以设置有效期,过了有效期自动删除 sessio ...

  4. Session,Cookie 和local storage的区别

    以前从没有听说过local storage, 在网上查了一些资料,得到如下结论 从存储位置看,分为服务器端存储和客户端存储两种 服务器端: session 浏览器端: cookie, localSto ...

  5. 关于local storage及session storage 应用问题

    H5- storage 可以在不同页面内进行数据传递数据信息,保证了数据传输不许后台交互即可在前端部分自我实现,以下为local storage 应用个人简析: * localStorage * se ...

  6. 关于local storage 和 session storage以及cookie 区别简析

    session storage 和local storage 都是存储在客户端的浏览器内: 一:关于COOKIE 的缺陷 * Cookie的问题 * 数据存储都是以明文(未加密)方式进行存储 * 安全 ...

  7. local storage 简单应用‘’记住密码’

    前些时候一直用cookie等来进行登录页面记住面膜操作,但是由于其存储容量小等缘故,所以后来转向local storage,原理为:当用户勾选记住密码时,local storage 存储用户名密码同时 ...

  8. web页面缓存技术之Local Storage

    业务:检测页面文本框的值是否有改变,有的话存入缓存,并存储到数据库,这样用户异常操作后再用浏览器打开网页,就可避免重新填写数据 数据库表:Test,包含字段:PageName,PageValue BL ...

  9. HTML5的local storage存储的数据到底存到哪去了

    原文地址:http://zhidao.baidu.com/link?url=m6p5MLv0R46lDCd_Vnrry4XOMbdCwgV5fzs3tj5Jeyht1nPkAZ9OrO23njYBY1 ...

随机推荐

  1. Eclipse工程中Java Build Path中的JDK版本和Java Compiler Compiler compliance level的区别(转)

    在这里记录一下在eclipse中比较容易搞混淆和设置错误的地方.如下图所示的功能: 最精准的解释如下: Build Path是运行时环境  Compiler是编译时环境  假设,你的代码用到泛型,Bu ...

  2. 【css】设置div位于浏览器的最底层,离用户最远

    有时候切换发现某块div一直悬浮在最上层,怎么设置div位于浏览器的最底层.离用户最远? <style> .in{ z-index: -1; } </style> 然后引用in ...

  3. Git以及github的使用方法(五),暂存区和工作区

    Git和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念. 先来看名词解释. 工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工 ...

  4. 使用excel进行数据挖掘(5)---- 应用场景分析

    使用excel进行数据挖掘(5)---- 应用场景分析 在配置环境后,能够使用excel进行数据挖掘. 环境配置问题可參阅: http://blog.csdn.net/xinxing__8185/ar ...

  5. python(8)- python基础数据类型

    数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视 频.网页等各种各样的数据,不同的数据,需要 ...

  6. UDIMM、RDIMM、SODIMM以及LRDIMM的区别

    DIMM简介 DIMM(Dual Inline Memory Module,双列直插内存模块)与SIMM(single in-line memory module,单边接触内存模组)相当类似,不同的只 ...

  7. 最简单的基于FFmpeg的移动端样例附件:SDL Android HelloWorld

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  8. 基于multiprocessing和threading实现非阻塞的GUI界面显示

    ========================================================= 环境:python2.7.pyqt4.eric16.11 热点:multiproce ...

  9. Windows App开发之集合控件与数据绑定

    为ListView和GridView加入数据 ListView採用垂直堆叠得方式显示数据.而GridView则採用水平堆叠得方式. 长相的话嘛,它们都几乎相同. <Grid Name=" ...

  10. TXT文本写入数据库

    load data local infile "D:/abc.txt" into table lee; leedabao.txt内容如下,中间用Tab隔开: 2 yuanpeng ...