cookie,session,localStorage等总结之localStorage

最新推荐文章于 2024-12-15 22:51:54 发布

原创最新推荐文章于 2024-12-15 22:51:54 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#存储

html5 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了HTML5新增的webStorage机制，包括localStorage和sessionStorage的区别与使用方法。详细讲解了这两种存储方式的操作API，并与传统的cookie进行了对比。

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

前两篇，分别总结了cookie，session，这篇总结下localStorage和sessionStorage.
localStorage和sessionStorage都是html新增的一种web Storage机制。而locastorage是存储在本地，而且是永久存储，除非手动删除，sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.

1.浏览器支持情况

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。

2.web storage操作方法

localStorage和sessionStorage都有相同的自己的操作方法，如setItem、getItem和removeItem等.
1.setItem
通过key-value键值对设置

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

2.getItem
通过key获取

var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");

3.removeItem
通过key删除

sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

4.dear
清除所有的key-value

sessionStorage.clear(); 
localStorage.clear();

3.对比cookie

首先， Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉，另外，如果cookie被人拦截，信息很容易泄露，所以cookie，一般不携带敏感信息。
而，localstorage没有数量限制，不过需要手动删除存储在本地的信息。

引用：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage