这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现本地存储信息的方法, 基于 localStorage 与 userData 实现本地存储的功能, 需要的朋友可以参考下
本文实例讲述了 JS 实现本地存储信息的方法。分享给大家供大家参考,具体如下:
web 应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是 cookie 了,大家也经常都用,但是 cookie 的缺点是显而易见的,其他的方案比如:IE6 以上的 userData,Firefox 下面的 globalStorage,以及 Flash 的本地存储,除了 Flash 之外,其他的几个都有一些兼容性的问题。
sessionStorage 与 localStorage
Web Storage 实际上由两部分组成:sessionStorage 与 localStorage。
sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储,仅仅是会话级别的存储。
localStorage 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
userData
语法:
XML
属性:
expires 设置或者获取 userData behavior 保存数据的失效日期。 XMLDocument 获取 XML 的引用。
方法:
获取指定的属性值。
- getAttribute()
从 userData 存储区载入存储的对象数据。
- load(object)
移除对象的指定属性。
- removeAttribute()
将对象数据存储到一个 userData 存储区。
- save(object)
设置指定的属性值。
- setAttribute()
localStorage
方法:
获取指定 key 本地存储的值
- localStorage.getItem(key):
将 value 存储到 key 字段
- localStorage.setItem(key,value):
删除指定 key 本地存储的值
- localStorage.removeItem(key):
封装
- localData = {
- hname:location.hostname?location.hostname:'localStatus',
- isLocalStorage:window.localStorage?true:false,
- dataDom:null,
- initDom:function(){ //初始化userData
- if(!this.dataDom){
- try{
- this.dataDom = document.createElement('input');//这里使用hidden的input元素
- this.dataDom.type = 'hidden';
- this.dataDom.style.display = "none";
- this.dataDom.addBehavior('#default#userData');//这是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)
- }
- }
- }
- }
使用方法就很简单了,这节 set,get,remove 就好了。
里面涉及到的 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 ('确认离开当前页面吗?未保存的数据将会丢失!');
- }
- };
希望本文所述对大家 Javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0529/327516.html