js中localStorage和sessionStorage功能_js localstorage与sessionstorage-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44963099/article/details/90671216

早期web用cookies存简单信息，但存在大小限制、数量限制和浪费带宽等问题。HTML5提供本地存储功能，有localStorage和sessionStorage两种方式。前者可永久保存数据，后者是会话级存储。二者有相同操作方法，如setItem、getItem等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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值删除