js中localStorage和sessionStorage功能

1.localStorage和sessionStorage功能
早期的web中使用cookies在客户端保存诸如用户名等简单的信息,但是,在使用cookies存储永久数据存在以下问题。
1.cookies的大小限制在4kB,不适合大量的数据存储。
2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。
3 cookies是随HTTP事务一起被发送的,因此会浪费一部分带宽。
HTML5很好的提供了本地存储的功能,以键值对存储的解决方案,支持容量至少为4M,HTML5的web提供了两种客户端存储方式。
localStorage:是一种没有时间限制的数据存储方式,可以将数据永久保存在客户端。
sessionStorage:指的是针对一个session的数据存储,即将数据保存在session对象中,当关闭浏览器后,这些数据就被删除。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

在这里插入图片描述
web Storage支持的属性与方法

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等

getItem(key):获取指定key所存储的value值
key(index)方法:返回列表中对应索引的key值
length属性:返回key/value队列的长度
removeItem(key)方法:从Storage中删除一个对应的键值对。
setItem(key,value)方法:将value存储到key指定的字段。
clear()方法:移除所有的内容

存:三种方法

   let ls = localStorage;
    ls.setItem("id",666);
    ls.name = "老王";
    ls["pwd"] = 123456;
    let ss = sessionStorage;
    ss.setItem("id",666);
    ss.name = "老王";
    ss["pwd"] = 123456;

取:

console.log(ls.getItem("id"));
    console.log(ls.name);
    console.log(ls["pwd"]);
    

改:与存的方式相同,key不在则创建,key在则修改value。
遍历:

    let ls = localStorage;
    
    for(let i=0;i<ls.length; i++){
        console.log(ls.key(i));
    }

删:

     let ls = localStorage;
     ls.clear();//全部删除
     ls.removeItem("name");//根据key值删除
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
localStoragesessionStorageJavaScript的两个对象,用于在浏览器存储数据。它们提供了一种在浏览器会话期间(sessionStorage)或者永久保存(localStorage)数据的方式。 通过localStoragesessionStorage对象,可以进行以下操作: 1. 存储数据:使用setItem()方法将数据存储到localStoragesessionStorage。例如: ```javascript localStorage.setItem('key', 'value'); // 存储到localStorage sessionStorage.setItem('key', 'value'); // 存储到sessionStorage ``` 2. 获取数据:使用getItem()方法从localStoragesessionStorage获取存储的数据。例如: ```javascript var value = localStorage.getItem('key'); // 从localStorage获取数据 var value = sessionStorage.getItem('key'); // 从sessionStorage获取数据 ``` 3. 更新数据:使用setItem()方法更新已存储的数据。例如: ```javascript localStorage.setItem('key', 'new value'); // 更新localStorage的数据 sessionStorage.setItem('key', 'new value'); // 更新sessionStorage的数据 ``` 4. 删除数据:使用removeItem()方法从localStoragesessionStorage删除指定的数据。例如: ```javascript localStorage.removeItem('key'); // 从localStorage删除指定的数据 sessionStorage.removeItem('key'); // 从sessionStorage删除指定的数据 ``` 5. 清空数据:使用clear()方法清空localStoragesessionStorage的所有数据。例如: ```javascript localStorage.clear(); // 清空localStorage的所有数据 sessionStorage.clear(); // 清空sessionStorage的所有数据 ``` 需要注意的是,localStorage存储的数据在浏览器关闭后仍然存在,而sessionStorage存储的数据只在当前会话期间有效,即当用户关闭浏览器标签页或窗口时会被清除。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值