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

深碍√TFBOYSˉ_ 2023-07-24 13:23 6阅读 0赞

## 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为返回的数据 成功后可执行操作
        }
    })

清除所有：