Vue(Vue2+Vue3)——38.浏览器存储(webStorage)

简介: Vue(Vue2+Vue3)——38.浏览器存储(webStorage)

38 浏览器存储(webStorage)


存储内容不是Vue团队打造的,原本的js中就有,所以可以不适用脚手架编译,可以写在HTML中

webStorage又分为localStorage和sessionStorage,浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

存储内容大小一般支持5MB左右(不同浏览器可能还不一样),它的键值对都是字符串

下面通过一个常见的应用案例来解释说明


38.1 浏览器本地存储应用


浏览器本地存储应用就是在本地浏览器中缓存些东西到硬盘中

下面以唯品会为例子演示,搜索框输入皮鞋,回车搜索

关闭页面,再次打开网页,发现皮鞋存在了搜索历史中

这里我是没有登录的,所以不可能是存入到数据库,浏览器本地存储是存储到硬盘的

通过控制的Application的LocalStorage中可以看到

可以看到是以键值对的形式存储的

如果我们新增一个,可以看到搜索历史中又多了一个

点击❌则会清空

这就是浏览器本地存储应用,我们也是可以通过代码实现类似的功能,下面进行演示


38.2 localStorage(本地存储)


localStorage的最大特点就是就算把浏览器关闭掉也不会消息。如果想把清除它,可以清除缓存

可以通过JS控制ocalStorage的crud,编写几个按钮,分别对localStorage里面的数据进行crud


新增字符串


使用 window.localStorage.setItem('xxx','xxx')方法即可新增,是键值对的形式,window可写可不写

注意:键和值必须都是字符串,如果不是字符串,会默认调用toString()方法


新增对象


如果新增的不是一个字符串,而是一个对象呢,如果直接新增的话,肯定会被toString

所以要使用JSON.stringify格式化处理下

这样新增的时候就可以新增一个字符串和一个对象了


读取字符串


既然设置(新增)使用的是setItem,那么读取肯定就是getItem了,根据key读取,有返回值


读取对象


上面读取对象的格式不是我们想要的,我们需要解析一下

如果读取字符串的是key不存在,那么则显示null

如果读取对象的key不存在,那么也显示null


删除


使用的api是removeItem,根据key删除localStorage中的数据


清空


和删除类似,删除是根据key删除单个,但是清空会删除全部的,这个api是clear

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="clearData()">清空全部的数据</button>
</body>
<script>
    function saveData(){
        // 向localStorage中存储数据,是键值对的形式 键和值必须都是字符串
        let p={'name':'张三',age:18}
        // 新增对象
        localStorage.setItem('person',JSON.stringify(p))
        // 新增字符串
        localStorage.setItem('msg','hello')
    } 
    function readData(){
        // 根据key读取localStorage中的数据
        // 读取字符串
        console.log(localStorage.getItem('msg'))
        // 读取对象,先解析
        console.log(JSON.parse(localStorage.getItem('person')))
    }
    function deleteData(){
        //  根据key删除localStorage中的数据
        localStorage.removeItem('msg')
    }
    function clearData(){   
        // 清空全部的数据
        localStorage.clear()   
    }
</script>
</html>

到了这里localStorage的应用和查看方式以及简单crud就说完了,localStorage的最大特点就是就算把浏览器关闭掉也不会消息,下面介绍sessionStorage


38.3 sessionStorage(会话存储)


localStorage有一个弟弟叫sessionStorage,它的特点就是浏览器已关闭,数据就没了

localStorage的所有API都可以适用于sessionStorage


既然localStorage的所有API都可以适用于sessionStorage,那么就可以复制刚才localStorage的代码进行简单修改

注意:使用sessionStorage的API要把localStorage进行替换

功能都是一样的,就不贴图了,而且关闭浏览器重新打开后,数据会消失


38.5 总结


相关API:

   1. xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。

   2.xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数,返回键名对应的值。

   3. xxxxxStorage.removeItem('key');该方法接受一个键名作为参数,并把该键名从存储中删除。

   4.  xxxxxStorage.clear()该方法会清空存储中的所有数据。

4. 备注:

   1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。

   2. LocalStorage存储的内容,需要手动清除才会消失。

   3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getItem的返回值是null。

   4. JSON.parse(null)的结果依然是null。

相关文章
|
21天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
8天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
8天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
8天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
8天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
7天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
9天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
7天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
9天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
14天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发