localStorage和sessionStorage详解

来源：互联网发布：淘宝双十二承接页装修编辑：程序博客网时间：2024/05/15 06:31

前言

HTML5引入了localStorage和sessionStorage两个本地缓存对象，以解决cookie缓存容量少的问题。由于cookie每次都会随着请求被发送出去，所以数据放在cookie中将造成宽带浪费。但是本地缓存并不能取代cookie，cookie是作为http规范的一部分，是用于与服务器交互的不必可少的条件之一。

区别

localStorage：本地缓存，没有时间限制，将一直缓存在本地。

sessionStorage：会话缓存，即浏览器关闭的时候清除缓存数据。

方法

localStorage和sessionStorage具有相同的方法，具体如下(以localStorage为例)：

1.设置缓存数据:localStorage.setItem(key,value);
2.获取缓存数据：localStorage.getItem(key)；

3.获取全部缓存数据：localStorage.valueOf();

4.获取指定下标的key键值：localStorage.key(N)；

5.删除缓存数据：localStorage.removeItem(key) ；

6.清空缓存数据：localStorage.clear();

localStorage.setItem("test","123");localStorage.setItem("num","567");localStorage.setItem("ber","89");var a = localStorage.getItem("test");console.log(a);//123var b = localStorage.valueOf();console.log(b);//Storage {ber: "89", num: "567", test: "123", length: 3}var c = localStorage.key(1);console.log(c);//numlocalStorage.removeItem("test");console.log(localStorage.getItem("test"));//nulllocalStorage.clear();console.log(localStorage.length);//0

由于localStorage和sessionStorage是js对象，所以也可以使用.key或['key']的方式来设置值或获取值。

localStorage.num = "567";localStorage.ber = "89";console.log(localStorage.num);console.log(localStorage['ber']);

存储大小限制

IE 9          > 4999995 + 5 = 5000000firefox 22.0 > 5242875 + 5 = 5242880chrome  28.0  > 2621435 + 5 = 2621440safari  5.1   > 2621435 + 5 = 2621440opera   12.15 > 5M （超出则会弹出允许请求更多空间的对话框）

可参照该网页进行测试：https://arty.name/localstorage.html

0 0