localStorage 和 sessionStorage的区别
存储对象:
在主流浏览器中,添加了html5 Web Storage API 的接口,storage是一个存储对象,它包括会话存储(session storage)或本地存储(local storage),它们分别有添加、修改或删除存储数据项的功能。
如果我们想要操作一个会话存储(session storage),可以使用 Window.localStorage对象,
操作本地存储(local storage),可以使用 Window.sessionStorage对象
。
localStorage介绍:
特征:
( 1 ).除非手动清除,否则永久保存在浏览器
( 1 ).存储大小一般为5MB
(3).只存在于客户端(浏览器)中,不参与和服务器的通信
(4).api使用简单,可以直接拿来使用,也可自己封装来对Object和Array有更好的支持
(5).相同浏览器的不同页面间可以共享相同的 localStorage
(6).不同浏览器无法共享localStorage或sessionStorage中的信息
api方法介绍:
localstorage.setItem(key,value) //该方法接受键,值两个参数,如果键存在,就更新值
localstorage.getItem(key) //该方法接受一个参数值key,返回对应的value值
localstorage.key(index) //该方法一个number值,返回对应下标的key
localstorage.removeItem(key) //该方法接受一个参数值key,把当前key,value从localstorage中删除
localstorage.clear() //该方法 清除对象中所有的key,value
对localStorage进行封装,可以兼容ie低版本浏览器(通过cookie来做兼容):
var local_storage = {};
local_storage = {
if(!window.localStorage){//当浏览器不支持localstorage的时候,采用cookie来代替localstorage
return{
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: (function(){
return (document.cookie.match(/\=/g) || window.localStorage).length;
})(),
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);
}
};
}else{
return {
setItem:function(key,value){
window.localStorage.setItem(key,value);
},
getItem:function(key){
console.log(key);
return window.localStorage.getItem(key);
},
removeItem:function(key){
window.localStorage.removeItem(key);
},
removeAll:function(){
window.localStorage.clear();
},
length:(function(){
return window.localStorage.length;
})()
}
}
}
sessionStorage介绍:
特征:
(1).仅在当前会话下有效,浏览器被关闭或当前页面被关闭的情况下清除
(2).存储大小一般为5MB
(3).只存在于客户端(浏览器)中,不参与和服务器的通信
(4).api使用简单,可以直接拿来使用,也可自己封装来对Object和Array有更好的支持
(5).不同页面或标签页间无法共享sessionStorage的信息
(6).不同浏览器无法共享localStorage或sessionStorage中的信息
api方法介绍:
sessionStorage.setItem(key,value) //该方法接受键,值两个参数,如果键存在,就更新值
sessionStorage.getItem(key) //该方法接受一个参数值key,返回对应的value值
sessionStorage.key(index) //该方法一个number值,返回对应下标的key
sessionStorage.removeItem(key) //该方法接受一个参数值key,把当前key,value从sessionStorage中删除
sessionStorage.clear() //该方法 清除对象中所有的key,value
对sessionStorage进行封装,可以兼容ie低版本浏览器(通过cookie来做兼容):
var session_storage = {};
session_storage = {
if(!window.localStorage){//当浏览器不支持localstorage的时候,采用cookie来代替localstorage
return{
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) + "; path=/";
this.length = document.cookie.match(/\=/g).length;
},
length: (function(){
return (document.cookie.match(/\=/g) || window.sessionStorage).length;
})(),
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);
}
};
}else{
return {
setItem:function(key,value){
window.sessionStorage.setItem(key,value);
},
getItem:function(key){
console.log(key);
return window.sessionStorage.getItem(key);
},
removeItem:function(key){
window.sessionStorage.removeItem(key);
},
removeAll:function(){
window.sessionStorage.clear();
},
length:(function(){
return window.sessionStorage.length;
})()
}
}
}
参考资料:
https://developer.mozilla.org/zh-CN/docs/Web/API/Storage
localStorage 和 sessionStorage的区别的更多相关文章
- localStorage和sessionStorage的区别
//在chrome测试的结果; 知识点1:localStorage和sessionStorage的区别; localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除local ...
- vuex知识笔记,及与localStorage和sessionStorage的区别
菜单快捷导航 Vuex是什么东东,有什么应用场景?localStorage和sessionStorage能否替代它? Vuex知识点State.Getter.Mutaion.Action Vuex模块 ...
- cookie、session、localStorage、sessionStorage的区别
cookie的机制 cookie是存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密. Cookie是服务器发 ...
- localStorage与sessionStorage 的区别
通过一枚页面计数器来区别localStorage与sessionStorage. 通过一个计数变量pageconut,每刷新页面,增加的是localStorage的数量,而sessionStorage ...
- 13.localStorage和sessionStorage的区别
HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...
- cookie、LocalStorage、sessionStorage三者区别以及使用方式
cookie用来保存客户浏览器请求服务器页面的请求信息 HTML5的WebStorage提供了两种API:localStorage(本地存储)和sessionStorage(会话存储) WebStor ...
- cookie、localStorage、sessionStorage的区别
localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 共同点:sessionStorage.localStorage和cooki ...
- Cookie、LocalStorage 与 SessionStorage的区别在哪里?
基本概念 Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通 ...
- localStorage、sessionStorage的区别
1.localStorage生命周期是永久的, sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了. ...
随机推荐
- python multiprocessing多进程应用
multiprocessing包是Python中的多进程管理包,可以利用multiprocessing.Process对象来创建进程,Process对象拥有is_alive().join([timeo ...
- Activity参数传递
简单数据传递 putExtra() 传递 findViewById(R.id.button).setOnClickListener(new View.OnClickListener() { @Over ...
- hibernate的优缺点和适用场合
Hibernate优点: 1.对象化.人员以面相对象的思想来操作数据库.Hibernate支持许多面向对象的特性,如组合,继承,多态等. 2.更好的移植性.对于不同的数据库,开发者只需要使用相同的数据 ...
- SQL编程题-----1
首先,题目给出这个数据库表格 要求写出SQL语句使之变成如下表格 解决方法: SELECT t1.Rq,t1.胜,t2.负 FROM //t1和t2是自己命的新表格的名字 (SELEC ...
- java中关键字volatile的误解和使用
在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...
- vim opencv
http://blog.csdn.net/fdl19881/article/details/7275203 ctags .vim: http://www.vim.org/scripts/script. ...
- intellj idea 使用
1. 导入包快捷 Alt + Enter 2. 查看方法注释,点击进入源码即可,若想和eclipse一样鼠标停留即可出现注释提示,开启方法为: Preferences->Editor->G ...
- maven构建java项目、web项目
maven构建java项目.web项目 一.mvn构建web项目 1安装mvn(包括path) 2命令:mvn archetype:create -DgroupId=cn.edu.sdau.neat ...
- react-redux升级到7.0.x后报错"TypeError: Object(...) is not a function"
同样一套代码,react-redux 6.0.x 的版本下可以正常运行,在7.0.x的版本下出现报错,而且报错原因实在太难定位了 package.json { ... "react-redu ...
- E20180514-hm
invalid adj. 无效的; 不能成立的; 有病的; 病人用的; readiness n. 准备就绪; 愿意,乐意