vue基础复习（三）

最新推荐文章于 2024-09-24 15:42:06 发布

hq520hq

最新推荐文章于 2024-09-24 15:42:06 发布

阅读量52

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/hq520hq/article/details/129335831

版权

文章介绍了前端数据存储的几种方式，包括cookie及其限制，以及HTML5引入的localStorage和sessionStorage，它们解决了cookie的存储空间问题。localStorage提供永久性存储，而sessionStorage则在当前窗口或标签页关闭后清空。此外，文章还提到了JavaScript的模板字符串和Vue.js中的修饰符使用示例。

摘要由CSDN通过智能技术生成

1.存储方式

cookie:

一：使用场景：

1：记住密码,下次自动登录。

2：记录用户浏览数据,进行商品(广告)推荐。

二：特点：

1：cookie保存在浏览器端。

2：单个cookie保存的数据不能超过4KB。

3：cookie中的数据是以域名的形式进行区分的。

4：cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。

5：cookie中的数据会随着请求被自动发送到服务器端。

三：

由于cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的WebStorage存储机制。

(localStorage和sessionStorage)

localstorage:

// 1.什么是localStorage

// 在HTML5中,新加入了一个localStorage特性,这个特性主要用来作为本地存储来使用。

// 它解决了cookie存储空间不足的问题,每条cookie的存储空间为4K,localStorage一般为5M。

// 2.localStorage的生命周期

// LocalStorage生命周期是永久,这意味着除非用户在显示在浏览器提供的UI上清除localStorage信息,

// 否则这些信息将永久存在。

// 3.localStorage的局限

// a.在IE8以上的IE版本才支持localStorage这个属性。

// b.目前所有的浏览器中都会被localStorage的值类型限定为string类型,

// 对我们日常比较常见的JSON对象类型需要一个转换

if(!window.localStorage){

alert('浏览器不支持localStorage')

}else{

var storage = window.localStorage;

// 写入a字段

storage['a'] = 1;

// 写入b字段

storage.b = 2;

// 写入c字段

storage.setItem('c',3)

console.log(typeof storage['a']); //string

console.log(typeof storage['b']); //string

console.log(typeof storage['c']); //string

}

sessionstorage:

// SessionStorage的生命周期

// SessionStorage生命周期为当前窗口或标签页。

// 一旦窗口或标签页被永久关闭了，那么所有通过Session存储的数据也就被清空了。

2.模板字符串

 const name =`模板字符串`;
         const age =19;
         const gender =`男`;
         function habit(){
            return `wake`
         }
     
    //  常规拼接
    const people2 = name +'今年' + age + '岁了,他是个' + gender +'人,喜欢' + habit()     


    // 使用模板字符串拼接
    // ${} 内部可以是变量，三元表达式，或者是一个函数

    const people = `${name}今年${age}了,他是个${gender === `男` ?`男孩` :`女孩`},喜欢${habit()}`
  console.log(people2);
  console.log(people);

3.修饰符

 <!-- lazy:不会随着输入框内容的变化而变化 -->
    <div id="root">
        <input type="text" placeholder="请输入内容" v-model.number="msg">
        输入密码：<input type="password"><br>
        选择文件：<input type="fire"><br>
         <span>{{msg}}</span>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                msg:'只怪我太胆小'
            },
            watch:{
                msg(){
                    console.log(typeof(this.msg));
                }
            }
        })
    </script>