详细介绍请看:

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)的更多相关文章

  1. H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)

    一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...

  2. JavaScript本地存储实践(html5的localStorage和ie的userData)

    http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日  ...

  3. js本地存储解决方案(localStorage与userData)

    WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的user ...

  4. JS 本地存储笔记

    本地存储     1.数据存储在用户浏览器中的     2.设置.读取方便.甚至刷新都不会丢失数据     3.容量比较大,sessionStorange约5M,localstorage约20M    ...

  5. js 本地存储 localStorage 之 angular

    今天项目中用到 php yii框架 用的不是 angular路由 所以用rootScope传值是不行的 我就用到了 localStorage 本地持久化存储 如下 set 顾名思义是设置 值 loca ...

  6. ASP.net 中关于Session的存储信息及其它方式存储信息的讨论与总结

    通过学习和实践笔者总结一下Session 的存储方式.虽然里面的理论众所周知,但是我还是想记录并整理一下.作为备忘录吧.除了ASP.net通过Web.config配置的方式,还有通过其它方式来存储的方 ...

  7. IOS数据本地存储的四种方式--

    注:借鉴于:http://blog.csdn.net/jianjianyuer/article/details/8556024 在IOS开发过程中,不管是做什么应用,都会碰到数据保存问题.将数据保存到 ...

  8. js——本地存储

    1. cookie 容量小:4k,在同源的http请求时携带传输,占用带宽,有日期限制 <!DOCTYPE html> <html lang="en"> & ...

  9. 本地存储之application cache和localstorage

    http://blog.csdn.net/kingliguo/article/details/52637087

随机推荐

  1. springcloud使用Zuul构建微服务网关入门

    为什么要使用微服务网关 不同的微服务一般会经过不同的网络地址,而外部客户端可能需要调用多个服务的接口才能完成一个业务需求. 如果让客户端直接与各个微服务通信,会有以下的问题: 客户端会多次请求不同的微 ...

  2. 抓包获取百度音乐API

    这次抓包是获取手机APP中的数据包,共分为三个部分: 1.win7建立wifi 2.PC架设代理服务器 手机设置代理 3.抓包分析 一.win7建立wifi 在win7下搭建wifi非常简单,网上的教 ...

  3. python小记

    最近有匹骚猪用微信骚扰我,我很是气愤, 自学一波脚本: 学习目的:用脚本回击回去,通过py写一个脚本,一次性给别人发n条消息: mac上自学python: brew install python3(自 ...

  4. wpf DataTemplate ColumnDefinition width equal

    <Grid.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="col1" /> <Colum ...

  5. Grafana 短信报警

    一.分析 需求 Grafana支持短信渠道报警 要求 使用开发提供的短信API接口 请求url: http://192.168.1.1:8088/alerting/sendSms?mobile=手机号 ...

  6. SqlServer代理作业

    最近一直在学习SqlServer 作业方面的知识,总结一下. 一:作业存在的库. msdb  use msdb Msdb数据库是代理服务数据库,为其报警.任务调度和记录操作员的操作提供存储空间. 二: ...

  7. Angular 5项目

    Angular 5项目 如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angu ...

  8. js跨越请求的2中实现 JSONP /后端接口设置运行跨越header

    由于浏览器同源策略,a域名的js向b域名ajax请求会被禁止.JS实现跨越访问接口有2中办法. 1.后端接口设置允许跨越的header头. //header('Access-Control-Allow ...

  9. spark优化之数据结构(减少内存)

    官网是这么说的: The first way to reduce memory consumption is to avoid the Java features that add overhead, ...

  10. 【Java】 大话数据结构(7) 循环队列和链队列

    本文根据<大话数据结构>一书,实现了Java版的循环队列.链队列. 队列:只允许在一端进行插入操作,而在另一端进行删除操作的线性表. 1.循环队列 队列的顺序储存结构:用数组存储队列,引入 ...