This article mainly introduces the method of JS to implement local storage of information. It implements the local storage function based on localStorage and userData. Friends in need can refer to it.
The example of this article describes the method of JS to implement local storage of information. . Share it with everyone for your reference. The details are as follows:
With the rapid development of WEB applications, local storage of some data has become an important requirement. There are many implementation solutions. The most common one is cookie. Everyone It is often used, but the shortcomings of cookies are obvious. Other solutions include: userData in IE6 and above, globalStorage in Firefox, and local storage in Flash. Except for Flash, the others have some compatibility issues. .
sessionStorage and localStorage
Web Storage actually consists of two parts: sessionStorage and localStorage.
sessionStorage is used to locally store data in a session. These data can only be accessed by pages in the same session and the data will be destroyed when the session ends. Therefore sessionStorage is not a persistent local storage, only session-level storage.
localStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.
userData
Syntax:
XML
The method of use is very simple, this section Just set, get, remove.
The demo code involved is as follows:
<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>There is also a more practical technology to prevent the page from closing. , display the page closing confirmation pop-up box, the reference code is as follows:
window.onbeforeunload = function() {
if (!canLeavePage()) {
return ('确认离开当前页面吗？未保存的数据将会丢失！');
}I hope this article will be helpful to everyone in JavaScript programming.
For more JS methods to implement local storage of information (based on localStorage and userData), please pay attention to the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
