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()

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值