本地存储

WebStorage详解

最新推荐文章于 2025-07-27 13:09:22 发布

原创最新推荐文章于 2025-07-27 13:09:22 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web

本地存储专栏收录该内容

1 篇文章

订阅专栏

本文介绍了WebStorage的概念及其组成部分sessionStorage和localStorage的区别与用法。详细解释了这两种存储方式的特点，包括它们如何存储数据、数据的生命周期以及提供的API方法。

随着WEB应用的快速发展，本地存储一些数据也成为一种重要的需求，实现的方案也有很多，最普通的就是cookie了，但是cookie的缺点是显而易见的，可能被用户禁用，在IE7+和firefox上，每个域最多只能保存50个Cookie,每个Cookie大小不超过4KB（有兴趣可以去浏览笔者博客“浅谈Cookie”）;因此，Web Storage就显得更加实用。

sessionStorage与localStorage

Web Storage实际上由两部分组成：sessionStorage与localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。

localStorage.num=5;设置num为“5”;
localStorage["str"]="happy";设置str为“happy”;

确定浏览器支持localStorage后，我们就可以使用它的接口了，localStorage的使用方法很简单，在chrome的控制台里面打印一下localStorage，就能列出它的全部方法，我相信很多人一看就能明白了。

我们主要用到的

length：本地存储数据的个数;

setItem(key,value)：向key字段写入value数据;

getItem(key)：去key字段的数据;

removeItem(key)：移除key字段;

clear()：清空该域下的所有数据;

key(i)：获取第i个数据的key;

需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以在存和读取的时候，需要自己进行类型的转换，最常用的是调用JSON.stringify()将其转为字符串，调用JSON.parse()将字符串转为json格式，如下：

var current_item={sort: "饮料",name: "可口可乐", price: "3", unit: "瓶",count:0};  
localStorage.setItem("user",JSON.stringify(current_item)); //往本地存 current_item这个对象  
var cartInfo=JSON.parse(localStorage.getItem("user"));//从本地取出 current_item这个对象

以上就是，笔者对本地存储的一些简单理解，仅供参考。