sessionStorage和localStorage是html5的新特性,和cookie一样,sessionStorage和localStorage也用于客户端存储数据,同样遵循同源策略,但sessionStorage和localStorage可以存储更多的数据,并且不会被HTTP请求携带。
基于这样两点好处,sessionStorage和localStorage可以应用到更加复杂的场景中。
浏览器支持
- cookies:主流浏览器都支持
- sessionStorage和localStorage
有效期
- cookies:只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
- localStorage :永久存储,永不失效,除非手动删除
- sessionStorage:数据存储在窗口对象中,窗口关闭后,数据丢失
JS操作localStorage和sessionStorage
浏览器提供了两个对象localStorage和sessionStorage,用于操作localStorage和sessionStorage。
由于用法相同,sessionStorage的用法略。
localStorage和sessionStorage存储数据的格式都是以字符串的形式来存储的,存取数据时常常需要JSON.stringify()
和JSON.parse()
进行转换。
localStorage.setItem(‘key’,‘value’)
设置localStorage
localStorage.getItem(‘key’)
获取某个localStorage
localStorage.removeItem(‘key’)
删除localStorage中指定的数据
localStorage.clear();
删除localStorage中所有数据
localStorage.key()
参数是索引,返回指定索引的键名
var shoppingCart = [
{id: 101, name: '苹果', count: 1, price: 2},
{id: 102, name: '香蕉', count: 2, price: 3}
];
//设置localStorage
localStorage.setItem('shoppingCart', JSON.stringify(shoppingCart));
localStorage.setItem('userId', 'test');
console.log('1、localStorage:', localStorage);
//获取localStorage
console.log('字符串形式的shoppingCart:', localStorage.getItem('shoppingCart'));
console.log('对象形式的shoppingCart:', JSON.parse(localStorage.getItem('shoppingCart')));
//删除localStorage中指定的数据
localStorage.removeItem('userId');
console.log('2、localStorage:', localStorage);
//删除localStorage中所有数据
localStorage.clear();
console.log('3、localStorage:', localStorage);
- 在Chrome开发者工具中查看localStorage