使用sessionStorage和localStorage

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.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