文章目录
文章参考
一、localStorage的增、删、改
- 存储的数据只能是字符串,不能存储对象(JSON、Array、Date等)
可以把JSON和数组转为字符串之后再存储
- sessionStorage 在关闭浏览器之后,存储的数据会消失,而localStroage不会
- localStorage 属性允许你访问一个Document 源(origin)的对象 Storage(类比跨域)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li>
<button onclick="addStorage()">添加storage</button>
<script>
let userInfo = {
username: '张三',
age: 18,
hobbies: ['篮球', '美女', '电影'],
isMarried: false,
birthDay: new Date(1999, 8, 12),
address: {
provice: '长沙市',
area: '雨花区',
isGood: false,
},
getName: function () {
console.log('getname 方法');
},
};
function addStorage() {
// 序列化的Date对象会转为字符串,反序列化没有办法转为Date对象
let userInfoStr = JSON.stringify(userInfo)
console.log(userInfoStr)
// 存储数据,只能存储字符串
window.localStorage.setItem('userInfo', userInfoStr);
}
</script>
</li>
<li>
<button onclick="updateStorage()">修改storage</button>
<script>
function updateStorage() {
// 获取数据
let userInfoStr = localStorage.getItem('userInfo')
let userInfo = JSON.parse(userInfoStr)
// 序列化的Date对象会转为字符串,反序列化没有办法转为Date对象
console.log(userInfo)
userInfo.age = 60
// JSON 对象删除某个属性
delete userInfo.birthDay
console.log(userInfo)
const newUserInfoStr = JSON.stringify(userInfo)
localStorage.setItem('userInfo', newUserInfoStr)
}
</script>
</li>
<li>
<button onclick="delStorage()">删除storage</button>
<script>
function delStorage() {
localStorage.removeItem('userInfo')
}
</script>
</li>
</ul>
</body>
</html>
二、onstorage事件
注意事项
- Chrome浏览器不会在当前标签页触发onstorage事件,IE浏览器则同时在所有标签页触发。
- 需要使用document.hasFocus()判断是否是当前标签页。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title</title>
<script>
function saveTo() {
localStorage.setItem('change-event', new Date().toJSON());
}
window.onstorage = function (e) {
console.log(e);
console.log(`The ${e.key} key has been changed from ${e.oldValue} to ${e.newValue}.`);
console.log(document.hasFocus());
// IE will receive the event both the current tab and other tab
if (!document.hasFocus() && e.key === 'change-event') {
console.log('do some business');
}
};
</script>
</head>
<body>
<button onclick="saveTo()">click</button>
</body>
</html>
三、自定义storage事件
3.1 如何自定义事件?
// e 代表触发的事件对象
window.addEventListener("huangbiao", function (e) {
console.log(arguments);
debugger
if (e.myAttr === "demo") {
alert("key值为demo,添加成功!")
}
}, false)
// 创建一个事件对象,名字为 huangbiao
let hbEventObj = new Event("huangbiao")
// 给事件对象添加一个属性,叫做 myAttr
hbEventObj.myAttr = "demo"
// 触发事件
window.dispatchEvent(hbEventObj)
3.2 自定义添加localstorage事件监听
// 缓存原来“保存数据”方法对象
var orignalSetItem = localStorage.setItem;
// 覆盖原来“保存数据”的方法
localStorage.setItem = function(key,newValue){
// 创建一个自定义事件对象,名字为 setItemEvent
var setItemEvent = new Event("setItemEvent");
// 给事件添加属性
setItemEvent.newValue = newValue;
// 触发事件
window.dispatchEvent(setItemEvent);
// 触发原来的 localStorage存储 数据的方法,这个是关键,不能使用 localStorage.setItem方法,否则死循环,会内存溢出的
orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
alert(e.newValue);
});
localStorage.setItem("name","wang");
触发原来的 localStorage存储 数据的方法,这个是关键,不能使用 localStorage.setItem方法,否则死循环,会内存溢出的
3.3 自定义监听删除localstorage 事件
var orignalremoveItem = localStorage.removeItem;
localStorage.removeItem = function(key,newValue){
var removeItemEvent = new Event("removeItemEvent");
removeItemEvent.key = key;
window.dispatchEvent(removeItemEvent);
orignalremoveItem.apply(this,arguments);
};
window.addEventListener("removeItemEvent", function (e) {
if(localStorage.getItem("demo")){
if(e.key=='demo'){
alert("key值为demo,删除成功");
}
}else{
alert("本地数据无key值为demo")
}
}