sessionStorage、localStorage用法总结 - - SegmentFault 思否

在工作中使用sessionStorage存储数据时，发现sessionStorage无法直接存储数组和对象，如存入对象则显示为"[object Object]"，对此作下记录，重新温习sessionStorage和localStorage

html5 中的 web Storage 包括了两种存储方式：sessionStorage 和 localStorage

存储大小为5MB，都保存在客户端，不与服务器进行交互通信，有相同的Web API

sessionStorage、localStorage区别

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

因此sessionStorage 和 localStorage 的主要区别在于他们存储数据的生命周期，sessionStorage 存储的数据的生命周期是一个会话，而 localStorage存储的数据的生命周期是永久，除非主动删除数据，否则永远不会过期

Web Storage API

localStorage 和 sessionStorage 有着统一的API接口，下面以sessionStorage为例介绍一下 API 接口使用方法

添加键值对

setItem(key,value)：为指定key值设置一个对应的value值

除了使用setItem方法，还可以使用sessionStorage.key = value或者sessionStorage['key'] = value这两种形式。

// 把name值存储到name的键上
sessionStorage.setItem('name', 'jacky'); // 法1 
// sessionStorage.name = 'jacky'; // 法2 
// sessionStorage['name'] = 'jacky'; // 法3 

添加数组和对象

需要注意的是key和value值必须是字符串形式的，如果不是字符串，会调用它们相应的toString()方法来转换成字符串再存储。

所以要存储数组或对象时，应先转换成字符串格式（如JSON格式）再进行存储，使用JSON.stringify(obj)方法

var obj = {
    name: 'jacky', 
    age: 22
};
sessionStorage['person'] = JSON.stringify(obj);
//sessionStorage['person'] = obj; 不能这样存储，这样存进去结果是"[object Object]"

存进去之后则为字符串格式

 "{"name":"jacky","age":22}"

需要拿出来使用的时候则使用JSON.parse()方法将JSON字符串转换为对象

var person = JSON.parse(sessionStorage['person'])

同理，数组也是这个用这个方法进行存储。

getItem（key）：根据指定的key值获取对应的value值

和setItem一样，getItem也有两种等效形式,value = sessionStorage.key和value = sessionStorage['key']。获取到的 value 值是字符串类型，如果需要其他类型，需要自己做类型转换。

// 获取存储到 name 的键上的值
var name = sessionStorage.getItem('name');
// var name = sessionStorage.name;
// var name = sessionStorage['name'];

removeItem（key）：删除指定的key值对应的value值

注意localStorage 没有数据过期的概念，所有数据如果失效了，需要开发者手动删除。

    var name = sessionStorage.getItem('name'); // "jacky"
    sessionStorage.removeItem('name');
    name = sessionStorage.getItem('name'); // null

clear()：删除所有存储的内容

它和removeItem不同的地方是removeItem删除的是某一项，而clear是删除所有。

    // 清除 localStorage
    sessionStorage.clear();
    var len = sessionStorage.length; // 0
    //length属性用于获取 sessionStorage 中键值对的数量。

key(index)：在指定的数字位置获取该位置的名字

需要注意的是赋值早的键值对应的索引值大，赋值完的键值对应的索引小,key方法可用于遍历 sessionStorage 存储的键值。

    sessionStorage.setItem('name','jacky');
    var key = sessionStorage.key(0); // 'name'
    sessionStorage.setItem('age', 10);
    key = sessionStorage.key(0); // 'age'
    key = sessionStorage.key(1); // 'name'

两者应用场景

sessionStorage应用场景

进行页面传值

localStorage应用场景

1. 适合长期保存在本地的数据
2. 可以用于存储该浏览器对该页面的访问次数