Vue:webStorage简介

一、存储

存储内容大小一般支持5MB左右(不同浏览器可能还不一样)

浏览器端通过 Window.sessionStorageWindow.localStorage 属性来实现本地存储机制。

二、API

xxxxxStorage.setItem('key', 'value');

该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。

xxxxxStorage.getItem('person');

该方法接受一个键名作为参数,返回键名对应的值。

xxxxxStorage.removeItem('key');

该方法接受一个键名作为参数,并把该键名从存储中删除。

xxxxxStorage.clear();

该方法会清空存储中的所有数据。

三、注意事项

  • SessionStorage存储的内容会随着浏览器窗口关闭而消失。
  • LocalStorage存储的内容,需要手动清除才会消失。
  • SessionStorageLocalStorage存储的都是key和value形式,valuestring类型。所以,我们在使用webStorage存储对象型数据的时候,一定要利用JSON.stringify(newVal)转化成字符串型json数据
  • xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getItem的返回值是null
  • JSON.parse(null)的结果依然是null
相关推荐
Moment1 小时前
从方案到原理,带你从零到一实现一个 前端白屏 检测的 SDK ☺️☺️☺️
前端·javascript·面试
鱼樱前端2 小时前
Vue3 + TypeScript 整合 MeScroll.js 组件
前端·vue.js
拉不动的猪2 小时前
刷刷题29
前端·vue.js·面试
武昌库里写JAVA2 小时前
原生iOS集成react-native (react-native 0.65+)
vue.js·spring boot·毕业设计·layui·课程设计
野生的程序媛2 小时前
重生之我在学Vue--第5天 Vue 3 路由管理(Vue Router)
前端·javascript·vue.js
鱼樱前端2 小时前
Vue 2 与 Vue 3 响应式原理详细对比
javascript·vue.js
codingandsleeping2 小时前
前端工程化之模块化
前端·javascript
CodeCraft Studio2 小时前
报表控件stimulsoft操作:使用 Angular 应用程序的报告查看器组件
前端·javascript·angular.js
阿丽塔~3 小时前
面试题之vue和react的异同
前端·vue.js·react.js·面试
Liigo3 小时前
初次体验Tauri和Sycamore(3)通道实现
javascript·rust·electron·tauri·channel·sycamore