Web前端最新HTML5(三)——Web 本地存储(2)，在线面试app

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

web 存储类型

========

1. localStorage - 用于长久保存数据，没有有效期，直到手动清除。

2. sessionStorage - 临时保存当前窗口的数据，窗口关闭之后自动清除。

不管是 localStorage 还是 sessionStorage 使用方法都是一样的语法，对常见操作语法进行示范。以下就以localStorage为例：

常见操作语法：

• 保存数据：

localStorage.key = value

localStorage.setItem(key,value)

• 获取数据

localStorage.key

localStorage.getItem(key)

• 删除单个数据：

localStorage.removeItem(key)

delete localStorage.key

• 删除全部：localStorage.clear()

• 获取某个索引的键值：localStorage.key(index)

数据都是以键值对形式存在的，操作的时候与json有点类似。

web存储数据应用

=========

**应用1：**取出本地存储的所有数据，以localStorage为例。

localStorage和sessionStorage是两个对象，类似json。可遍历取出数据，如：

localStorage.user = “倩倩”

localStorage.age = “18”

localStorage.job = “打杂”

console.log(localStorage)// {job: “打杂”, age: “18”, user: “倩倩”, length: 3}

for(key in localStorage){

console.log(${key}--${localStorage[key]})

}

运行程序之后，结果如图：

我们发现遍历的时候把localStorage的属性和方法全部打印出来了，而我们需要的只是我们存储的三个数据，其余的都不要，此时我们换个方法。

localStorage.user = “倩倩”

localStorage.age = “18”

localStorage.job = “打杂”

console.log(localStorage)// {job: “打杂”, age: “18”, user: “倩倩”, length: 3}

for(let i=0;i<localStorage.length;i++){

let key = localStorage.key(i)

console.log(${key}:${localStorage[key]})

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-zhLrHrkw-1715904080879)]

[外链图片转存中…(img-2hc2WZ9v-1715904080880)]