详解js本地储存到uniapp本地储存

最新推荐文章于 2024-04-23 22:02:47 发布

Yㅤ

最新推荐文章于 2024-04-23 22:02:47 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/hanbic/article/details/113001496

版权

本文详细介绍了JavaScript中的Cookie、Session、LocalStorage的使用方法及其优缺点，并对比了它们之间的差异。接着，文章深入讲解了uniapp的本地存储API，包括异步和同步的设置、获取、移除和清理数据的方法，提供了具体示例供读者参考。

摘要由CSDN通过智能技术生成

各种储存方案

cookies： 浏览器均支持，容量为4KB
LocalStorage： HTML5，容量为5M
sessionStorage： HTML5，容量为5M
UserData：仅IE支持，容量为64KB
Flash：100KB，非HTML原生，需要插件支持
Google Gears SQLite ：需要插件支持，容量无限制
globalStorage：Firefox独有的，Firefox13开始就不再支持这个方法

UserData仅IE支持， Google Gears SQLite需要插件，Flash已经伴随着HTML5的出现渐渐退出了历史舞台

Cookie
Cookie特点

cookie大小限制为4kb
只要有请求涉及cookie，cookie就要在服务器与客户端来回传送
cookie会随请求到服务器，js操作cookie比较繁琐

Session

session机制是一种服务器端的机制
Cookie和Session简单对比

cookie客户端 session 服务器
session 占用资源
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie
cookie 不安全
建议： - 将登陆信息等重要信息存放为SESSION
    其他信息如果需要保留，可以放在cookie中

cookie语法

读取cookie allCookies = document.cookie;
写入cookie document.cookie = updatedCookie;
;path=*path* (例如 '/', '/mydir') 如果没有定义，默认为当前文档位置的路径。
;domain=*domain* (例如 'example.com'， '.example.com' (包括所有子域名), 'subdomain.example.com') 如果没有定义，默认为当前文档位置的路径的域名部分。
;max-age=*max-age-in-seconds* (例如一年为606024*365)
;expires=*date-in-GMTString-format* 如果没有定义，cookie会在对话结束时过期这个值的格式参见Date.toUTCString()
;secure (cookie只通过https协议传输)

LocalStorage

这是一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。 它也是采用Key - Value的方式存储数据，底层数据接口是sqlite，按域名将数据分别保存到对应数据库文件里。它能保存更大的数据（IE8上是10MB，Chrome是5MB），同时保存的数据不会再发送给服务器，避免带宽浪费。

LocalStorage的属性与方法
属性方法说明
localStorage.length 获得storage中的个数
localStorage.key(n) 获得storage中第n个元素对的键值（第一个元素是0）
localStorage.key 获取键值key对应的值
localStorage.getItem(key) 获取键值key对应的值
localStorage.setItem(key, value) 添加数据，键值为key，值为value
localStorage.removeIte