<!-- 特点:1)保存在浏览器中
2)存储数据不超过4kb
3)内部数据以域名进行区分
4)存储的数据有一定的存储时间
5)内部数据会根据请求发送到服务器端口 -->
Cookie 的生命周期
cookie有2种存储方式,一种是会话性,一种是持久性。
会话性:如果cookie为会话性,那么cookie仅会保存在客户端的内存中,当我们关闭客服端时cookie也就失效了
持久性:如果cookie为持久性,那么cookie会保存在用户的硬盘中,直至生存期结束或者用户主动将其销毁。
cookie我们是可以进行设置的,我们可以人为设置cookie的有效时间,什么时候创建,什么时候销毁。
一般情况下,cookie是以键值对进行表示的(key-value)的字符串。
// localStorage这个是永久存储的,这个存储空间为5m
// 生命周期为永久,除非在浏览器提供的ui上清除,否则将永久存在,
// 目前本地存储只支持string类型
// if (window.localStorage) {
// alert(浏览器支持)
// }
if (!window.localStorage) {
alert(浏览器不支持)
}else{
var storage = window.localStorage;
// 写入字段的三种方式
storage['a'] =1;
storage.b = 2;
storage.setItem('c',3);
console.log(typeof storage['a']);
console.log(typeof storage['b']);
console.log(typeof storage['c']);
}
计算属性:
模板:与data同级
computed:{
计算属性名(){
return 结果
}
}
、什么是计算属性
- 写在computed对象中的属性,本质上是一个方法,不过使用时依旧当属性来使用
- get():必须要写,该函数不接受参数
get()什么时候被调用?:当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用,getter函数有一个返回值,该返回值就是计算属性的值
set():可选项,接受一个可选参数(计算属性被修改之后的值)
set()什么时候被调用?: 当计算属性被修改时被调用
get()和 set()中出现的this执向vm<div id="root"> 性:<input type="text" v-model="lastName"></input><br><br> 名:<input type="text" v-model="firstName"></input><br><br> 全名:<span>{{fullName}}</span> <button @click="btn">更变值</button> </div> <script> new Vue({ el:'#root', data(){ return{ firstName:'万物不及你', lastName:'喜欢你', } }, computed:{ fullName :{ get(){ return this.firstName + '-' +this.lastName; }, set(value){ console.log('set',value); const arr = value.spilt('-'); this.firstName =arr[0]; this.lastName =arr[1]; }, } }, methods:{ btn(){ this.fullName ='我们之间的距离-好像忽远又忽近'; } } })