localStorage/sessionStorage/cookie存储

本地存储：将程序中产生的一些数据存储到电脑中

常见的本地存储方案：
1.storage方案：

方式一：localStorage ===== 本地持久化存储（只要不手动删除一直是存在的）
怎么知道数据有没有存下来：在检查工具中找-Application-storage-localStorage

特点：1.一旦存储就永久存在，除非自己手动删除
2.可以跨页面通讯，也就是在a页面中存储的数据可以在别的页面获取到
3.存储的时候只能存一些基本类型的数据，复杂类型的数据是不能存储

语法：
    存数据(增)：window.localStorage.setItem(key,value)
    删除数据： window.localStorage.removeItem(键名)
    一键清空：window.localStorage.clear()
    查询数据：window.localStorage.getItem(键名)
    改 数 据：语法和存储数据的语法是一样的 // 对象中不能出现重复的键名，故键名第二次出现视为更改

方式二：sessionStorage ===== 会话存储（临时存储，只要浏览器关了就没了）
增、删、改、查、一键清空的语法同上
支持跨页面通信，在别的页面中也可以获取数据
(前提 : 别的页面必须是通过本页面跳转过去的才可以,且必须是当前窗口，如果是新窗口就不行)

语法：
    存数据(增)：window.sessionStorage.setItem(key,value)
    删除数据： window.sessionStorage.removeItem(键名)
    一键清空：window.sessionStorage.clear()
    查询数据：window.sessionStorage.getItem(键名)
    改 数 据：语法和存储数据的语法是一样的 // 对象中不能出现重复的键名，故键名第二次出现视为更改

2.cookie方案：

cookie存数据的特点：
1.cookie只能存储字符串
2.cookie存储数据是有大小限制的，只能存储4kb左右的数据，不能存太多
3.cookie存储默认是会话级别的，也就是窗口关了就没了，但是我们可以设置过期时间
4.cookie的操作必须依赖’服务器‘，通过本地打开的页面是不能操作cookie的
5.cookie的数据在前后端通讯的时候是会自动的携带
6.存储依赖域名。在哪个域名下打开的，就只能在哪个域名使用，不能跨域名通讯的
操作cookie关键点：要研究页面怎么样可以在服务器打开。（只需要借助vscode的live server插件即可）
在运行的时候：右键选择：open with live server选项运行

用cookie存储数据的语法:

document.cookie = 'key=value'
//设置过期时间：
            我们设置的时间最终都会按照世界标准时间执行的
            toGMTString()===转成北京时间
document.cookie = 'password=123456;expires=' + 时间对象.toGMTString()//转世界时间
//获取 cookie
console.log(document.cookie）

//存储了一条数据
document.cookie = 'username=zhangsan'
//存储一条带有过期时间的cookie
//创造一个事件对象 time就是时间对象，里面的时间是本地系统时间
var time = new Date()
//现在时间是2022年10月20日 16：57分 设置在16：59分过期
time.setMinute(59)
document.cookie = 'password=123456;expires=' + time.toGMTString()

localStorage/sessionStorage/cookie存储

猜你喜欢