JS本地存储信息的实现方式(localStorage 与 userData)
详细介绍请看:
http://www.cnblogs.com/beiyuu/archive/2011/07/20/js-localstorage-userdata.html
里面涉及到的 demo 代码如下:
<script type="text/javascript">
(function() {
window.localData = {
hname : location.hostname ? location.hostname : 'localStatus',
isLocalStorage : window.localStorage ? true : false,
dataDom : null,
initDom : function() {
if (!this.dataDom) {
try {
this.dataDom = document.createElement('input');
this.dataDom.type = 'hidden';
this.dataDom.style.display = "none";
this.dataDom.addBehavior('#default#userData');
document.body.appendChild(this.dataDom);
var exDate = new Date();
exDate = exDate.getDate() + 30;
this.dataDom.expires = exDate.toUTCString();
} catch (ex) {
return false;
}
}
return true;
},
set : function(key, value) {
if (this.isLocalStorage) {
window.localStorage.setItem(key, value);
} else {
if (this.initDom()) {
this.dataDom.load(this.hname);
this.dataDom.setAttribute(key, value);
this.dataDom.save(this.hname)
}
}
},
get : function(key) {
if (this.isLocalStorage) {
return window.localStorage.getItem(key);
} else {
if (this.initDom()) {
this.dataDom.load(this.hname);
return this.dataDom.getAttribute(key);
}
}
},
remove : function(key) {
if (this.isLocalStorage) {
localStorage.removeItem(key);
} else {
if (this.initDom()) {
this.dataDom.load(this.hname);
this.dataDom.removeAttribute(key);
this.dataDom.save(this.hname)
}
}
}
}; var text = document.getElementById('localDataHook');
var btn = document.getElementById('clearBtnHook');
window.onbeforeunload = function() {
localData.set('beiyuuData', text.value);
}; btn.onclick = function() {
localData.remove('beiyuuData');
text.value = ''
}; if (localData.get('beiyuuData')) {
text.value = localData.get('beiyuuData');
}
})();
</script>
还有一个比较实用的技术,阻止页面关闭,显示 关闭页面确认弹出框,参考代码如下:
window.onbeforeunload = function() {
if (!canLeavePage()) {
return ('确认离开当前页面吗?未保存的数据将会丢失!');
}
};
JS本地存储信息的实现方式(localStorage 与 userData)的更多相关文章
- H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)
一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...
- JavaScript本地存储实践(html5的localStorage和ie的userData)
http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日 ...
- js本地存储解决方案(localStorage与userData)
WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的user ...
- JS 本地存储笔记
本地存储 1.数据存储在用户浏览器中的 2.设置.读取方便.甚至刷新都不会丢失数据 3.容量比较大,sessionStorange约5M,localstorage约20M ...
- js 本地存储 localStorage 之 angular
今天项目中用到 php yii框架 用的不是 angular路由 所以用rootScope传值是不行的 我就用到了 localStorage 本地持久化存储 如下 set 顾名思义是设置 值 loca ...
- ASP.net 中关于Session的存储信息及其它方式存储信息的讨论与总结
通过学习和实践笔者总结一下Session 的存储方式.虽然里面的理论众所周知,但是我还是想记录并整理一下.作为备忘录吧.除了ASP.net通过Web.config配置的方式,还有通过其它方式来存储的方 ...
- IOS数据本地存储的四种方式--
注:借鉴于:http://blog.csdn.net/jianjianyuer/article/details/8556024 在IOS开发过程中,不管是做什么应用,都会碰到数据保存问题.将数据保存到 ...
- js——本地存储
1. cookie 容量小:4k,在同源的http请求时携带传输,占用带宽,有日期限制 <!DOCTYPE html> <html lang="en"> & ...
- 本地存储之application cache和localstorage
http://blog.csdn.net/kingliguo/article/details/52637087
随机推荐
- MVC控制器使用总结
一.新手入门 1.特性 [AuthorizeFilter] 用于权限过滤 [HttpGet] [HttpPost] 2.参数 GET获取 [HttpGet] ) { return Json(&quo ...
- Linux硬盘的检测(原创)
http://czmmiao.iteye.com/blog/1058215 概述 随着硬盘容量.速度的快速发展,硬盘的可靠性问题越来越重要,今天的单块硬盘存储容量可轻松达到1TB,硬盘损坏带来的影响非 ...
- 升级Chrome后无法打开网页
最近升级了网站,发现很多普通网站Chrome 都打不开了.... IE 可以正常打开,很是郁闷,重启电脑都不行. chrome://net-internals/#dns 点击如下按钮 清楚DNS缓 ...
- 转:vue-router 2.0 常用基础知识点之router.push()
转载地址:http://www.jianshu.com/p/ee7ff3d1d93d router.push(location) 除了使用 <router-link> 创建 a 标签来定义 ...
- python小记
最近有匹骚猪用微信骚扰我,我很是气愤, 自学一波脚本: 学习目的:用脚本回击回去,通过py写一个脚本,一次性给别人发n条消息: mac上自学python: brew install python3(自 ...
- liunx jdk安装
打开https://www.oracle.com/technetwork/java/javase/downloads/index.html 选择Development版本(server为服务器版本), ...
- Vue学习系列---安装
一.前言 学任何东西都是有理由的,目前主要有Angular,React,Vue这三个前端MVVM框架.我选择vue原因很简单,“”入门简单“”,是的只是这个理由.相较于其他2个框架,vue的文档真的是 ...
- shell中信号处理
参考: Shell 脚本中信号处理实践 Linux Shell 的信号 trap 功能你必须知道的细节 在 unix 里,可能发生的每一种类型的事件都是由一个独立的信号来描述,每一个信号都是一个小 ...
- vue-cli的工程模板与构建工具
vue-cli的工程模板与构建工具 https://www.cnblogs.com/yinn/p/9712480.html 脚手架vue-cli系列二:vue-cli的工程模板与构建工具 上篇文章我们 ...
- 【LOJ】#2496. 「AHOI / HNOI2018」毒瘤
题面 还有这么诚实的出题人! 我们最多影响20个点,然后把这20个点的虚树建出来,并且枚举每个点的选举状态,如果一个点选或不选可以通过改\(dp[u][0] = 0\)或\(dp[u][1] = 0\ ...