JS的储存方式(学习笔记)

18 篇文章 0 订阅
15 篇文章 0 订阅

在前端中有三种储存方式即cookie、localStorage、sessionStorage

三种储存方式各有特点各有用途

一.cookie

作用:用于浏览器和服务器端进行通信

特点:保存在浏览器端,容易被截获,不安全

大小:4KB  每次发送请求都会携带,导致占用带宽

生命周期:浏览器从打开到关闭的过程,也可以设置过期时间

cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。

cookie中的数据会随着请求被自动发送到服务器端。

使用场景:

        1.记住密码,下次自动登录

        2:记录用户浏览数据,进行商品(广告)推荐。

由于cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的WebStorage存储机制。(localStorage本地存储和sessionStorage临时存储)

二.localStorage(本地储存)

生命周期:永久,除非人为删除

大小:5M或5M以上

保存的位置:浏览器端存储,不同页面中也可以获取存储信息

存储方式:键值对

只能储存字符串 开发中经常将对象JSON.stringify()编码后储存

注意:所有存放在本地存储中的数据都是字符串。

// 存储数据
 
localStorage.setItem(key,value)
 
// 获取数据
 
localStorage.getItem(key)
 
// 删除数据
 
localStorage.removeItem(key)
 
// 删除所有数据
 
localStorage.clear()

判断浏览器是否支持localstorage

if(window.localStorage){
        alert('浏览器支持localStorage')
    }

写入方法

if(!window.localStorage){
        alert('浏览器不支持localStorage')
    }else{
        var Storage = window.localStorage
        //写入a字段
        Storage['a'] = 1;
        //写入b字段
        Storage.b = 2;
        //写入c字段
        Storage.setItem('c',3)
        console.log(typeof Storage['a']);
        console.log(typeof Storage['b']);
        console.log(typeof Storage['c']);

    }

三.sessionStorage(临时储存)

生命周期:当前窗口或标签页,当前页面被关闭则数据就会清空

保存的位置:当前页面窗口

键值对的形式存储使用。

//存储数据:

sessionStorage.setltem(key,value)

//获取数据:

sessionStorage.getltem(key)

//删除数据:

sessionStorage.removeltem(key)

//删除所有数据:

sessionStorage.clear()

三种方式的相同的都保存在浏览器端,不同在于传递方式,和数据的大小。

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值