本地储存 --- HTML、jQuery、Vue、小程序、uni-app

最新推荐文章于 2024-10-23 21:57:50 发布

薛阳-

最新推荐文章于 2024-10-23 21:57:50 发布

阅读量408

点赞数 2

文章标签：本地储存

本文链接：https://blog.youkuaiyun.com/xqainyo/article/details/105464250

版权

本文探讨了HTML、jQuery、Vue、小程序和uni-app中如何进行本地储存。讲解了window.localStorage和sessionStorage的区别，以及jQuery的cookie、Vue的localStorage和sessionStorage使用方法。在小程序和uni-app中，本地储存操作与HTML类似，但需调用特定API如uni.setStorage进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML本地储存

window.localStorage - 存储没有截止日期的数据，当浏览器被关闭时数据不会被删除
window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

localStorage 使用：
// 存储
localStorage.setItem("lastname", "Gates");
localStorage.lastname= 'Gates';
// 取回
localStorage.getItem("lastname");
localStorage.lastname
// 删除
localStorage.removeItem("lastname");

sessionStorage 使用：
// 存储
sessionStorage.setItem("lastname", "Gates");
// 取回
sessionStorage.getItem("lastname");
// 删除
sessionStorage.removeItem("lastname");

jQuery本地储存

cookie： cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。

//写cookie（名字，值，{有效期，路径}）
$.cookie('mycookie','123',{expires:7,path:'/'}); 
//jquery 获取cookie
$.cookie('mycookie');

localStorage 、sessionStorage 同HTML本地储存

Vue本地储存

localStorage 、sessionStorage
sessionStorage和localStorage的用法和HTML基本一致，引用类型的值要转换成JSON

储存：

//对象
const info = {name: "huo", age: 18,id: "1"}
//字符串
const str = "haha";

localStorage.setItem('huo',JSON.stringify(info));

localStorage.setItem('zheng',str)

获取：

var data1 = JSON.parse(localStorage.getItem('hou'));

var data2 = localStorage.getItem('zheng')

删除：

//删除某个
localStorage.removeItem("hou")

//删除所有
localStorage.clear();

小程序本地储存

设置本地储存：

wx.setStorage({
	key: 'apply',  //存储的名字
	data: ""   //要存储的数据
})

获取本地储存：

wx.getStorage({
	key: 'apply',
	success: (res) => {
    	//res.data为返回的数据  成功后可执行操作
    }
})

删除：

wx.removeStorage({
	key: 'apply',
	success: (res) => {
    	//res.data为返回的数据  成功后可执行操作
    }
})

清除所有：

wx.clearStorage()

uni-app本地储存

同小程序，只是把wx. 改为 uni.
例如：uni.setStorage