一. 说明
在日常开发中,我们经常使用localStorage来存储一些变量。这些变量会存储在浏览中。对于localStorage来说,即使关闭浏览器,这些变量依然存储着,方便我们开发的时候在别的地方使用。
二. localStorage的使用
存储值:window.localStorage.setItem(‘键名’, 值)
读取值:window.localStorage.getItem('‘键名’)
三. 监听localStorage值的变化
- 在utils中新建一个文件watchLocalStorage.ts
export default function dispatchEventStroage() {
const signSetItem = localStorage.setItem
localStorage.setItem = function (key, val) {
let setEvent = new Event('setItemEvent')
setEvent.key = key
setEvent.newValue = val
window.dispatchEvent(setEvent)
// eslint-disable-next-line prefer-rest-params
signSetItem.apply(this, arguments)
}
}
2. 在main.js中引入并挂载
import dispatchEventStroage from './utils/watchLocalStorage'
Vue.use(dispatchEventStroage);
3.在需要监听的地方使用如下代码
mounted () {
// 监听localhostStorage的数据变化,结合utils/tool.js配合使用
const that=this
window.addEventListener('setItemEvent', function (e) {
if (e.key === 'myKey') { // myKey是需要监听的键名
that.mykey = e.newValue;
console.log(JSON.parse(e.newValue)) // 这里的newValue就是localStorage中,键名为myKey对应的变化后的值。
console.log('本地存储值发生变化:', e.newValue)
}
})
},
特别注意:
我刚开始做的时候,考虑不周,没有写const that=this 这一句,我用的如下代码,一直报错,赋值不了,如下代码是错误的,
为什么要用const that=this这一个呢?
那是因为在JavaScript中,this代表的是当前对象,他是会随程序运行不停改变的,
如果用this的话,this是addEventListener监听中当前的对象,所以赋值的时候不能赋值到外面去。
const that = this 其实就是在this改变之前先复制一份给that,那么在程序后面的运行中就可以用that来赋值该函数以外的对象了,比如that.order
四.另外提供一种方法 vuex
利用 const that=this,可以将值存进store中,
this.od2Visible = true;
this.title = '舰船航线规划';
this.$store.commit("tools/setzhk", 'od5');
var tempList = [];
const that = this;
var handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas); // 创建鼠标事件handler
handler.setInputAction(function(click) { // 监听鼠标左键点击事件
// 获取点击位置的地球坐标
var cartesian = window.viewer.camera.pickEllipsoid(click.position, window.viewer.scene.globe.ellipsoid);
// 转换为笛卡尔坐标系
let cartographic1 = Cesium.Cartographic.fromCartesian(cartesian);
// 转换为经纬度
var latitude = Cesium.Math.toDegrees(cartographic1.latitude);
var longitude = Cesium.Math.toDegrees(cartographic1.longitude);
tempList.push(longitude,latitude)
if (cartesian) {
var entity = window.viewer.entities.add({ // 在该位置添加点
position: cartesian,
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW
}
});
}
localStorage.setItem('lonlan',tempList)
that.$store.commit("tools/setlonlat", tempList);
console.log(1001,that)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
然后再使用 用 计算属性 computed 和 watch 监听实现
computed: {
lonlat(){
return this.$store.state.tools.lonlat
}
},
watch: {
lonlat(newVal,oldVal){
console.log(1002,newVal,oldVal)
}
},