现代移动端浏览器几乎都支持localStorage/sessionStorage
,注意是几乎!当部分浏览器开启无痕模式后,localStorage
无效,但window对象下依然存在localStorage
,甚至还有setItem
、getItem
方法,需要更严格的兼容判断。
以下是Quark(夸克)浏览器在正式和无痕两种模式下的localStorage.setItem
方法的表现(sessionStorage同理):
正常模式:function setItem(){[native code]}
无痕模式:function (a,b){}
所以,无痕模式下setItem
当然无效,而且不会抛出错误,神不知鬼不觉。getItem
会得到null
。
在网上查了资料,比较偏向于localStorage和cookie合作的方式。
<script>
// (以下操作cookie和storage方法在公司帅哥@jackie基础上修改)
let storage = {
// set localStorage/sessionStorage
setStorage(name, value, type) {
if (this.isSupportStorage()) {
const storageName = (type || 'local') + 'Storage';
if (typeof value !== 'object') {
window[storageName].setItem(name, value);
} else {
value = JSON.stringify(value);
window[storageName].setItem(name, value);
}
} else {
this.setCookie(name, JSON.stringify(value), 7)
}
},
// get localStorage/sessionStorage
getStorage(name, type) {
if (this.isSupportStorage()) {
const storageName = (type || 'local') + 'Storage';
return window[storageName].getItem(name) || '';
} else {
return this.getCookie(name) || ''
}
},
// set cookie
setCookie(key, val, day) {
let exp = null;
let expires = "";
if (day) {
exp = new Date();
exp = new Date(exp.setTime(exp.getTime() + day * 24 * 60 * 60 * 1000)).toUTCString();
expires = ";expires=" + exp;
}
document.cookie = key + "=" + escape(val) + expires;
},
// get cookie
getCookie: function (name) {
let cookie = document.cookie
cookie = cookie.split(';').map(function (value) {
return value.trim()
}).reduce(function (obj, item) {
let index = item.indexOf('=');
obj[item.slice(0, index)] = item.slice(index + 1);
return obj
}, {});
if (name) return (unescape(cookie[name]) || '');
return unescape(cookie || '')
},
// 是否兼容
isSupportStorage() {
let ua = window.navigator.userAgent,
notSupportBrowers = [];
// 手动排除不支持的浏览器
for (var i = 0; i < notSupportBrowers.length; i++) {
if (ua.indexOf(notSupportBrowers[i]) > -1) {
return 0
}
}
// 自动检测
try {
window.localStorage.setItem('isSupportStorage', 'test');
window.localStorage.removeItem('isSupportStorage');
//部分浏览器开启无痕模式后,setItem、getItem方法失效
return this.isNative(window.localStorage.setItem);
} catch (e) {
return 0;
}
},
// 是否原生支持
isNative(fn) {
return (/\{\s*\[native code\]\s*\}/).test('' + fn);
}
}
storage.setStorage('test', 'hello');
document.write('你的浏览器'+(storage.isSupportStorage()?'':'不')+'支持localStorage'+'<br />');
document.write('数据将存于'+(storage.isSupportStorage()?'localStorage':'cookie')+'<br />');
document.write('test的值为'+storage.getStorage('test')+'<br />');
</script>
注:以上代码仅作为探讨,不保证没有其它问题,请自行实践测试。
(本篇完。有疑问欢迎留言探讨)
热门文章
- 微信小程序“拍照识图”上线(62,525)
- YouTube评论翻译插件《油管评论翻译机》上线了(55,159)
- 基金助手--chrome浏览器插件(42,236)
- 拍照识别彩票结果在线工具(30,937)
- vue+tabs动态组件方案漫谈(25,681)
- 网页打印插件Print.js(23,136)
- 《油管评论翻译机》使用说明书(22,834)
- 自用YouTube抓取评论+翻译工具(22,234)
- px转rem/vw方法小结(17,341)
- YouTube评论导出免费在线工具(15,822)