Window.sessionStorage存储

sessionStorage特点

sessionStorage是HTML5新增的会话存储对象，sessionStorage属性访问Storage当前源的会话对象，当前源要求协议、主机名、端口相同，且在同一窗口（浏览器的标签页）。

• 只要打开浏览器，页面会话就会持续，并在重新加载和还原页面后继续存在。
• 在新选项卡或窗口中打开页面会创建一个新会话，该会话具有顶级浏览上下文的值，这与会话cookie的工作方式不同。
• 使用相同的URL打开多个选项卡/窗口sessionStorage将为每个选项卡/窗口创建一个。
• 关闭标签页/窗口将结束会话并清除中的对象sessionStorage。

与 localStorage比较

sessionStorage与localStorage相似，区别在于在localStorage内存储的数据不会过期，但当页面关闭sessionStorage内输入的数据会被清空。
最近在写表单项时用到sessionStorage，使用sessionStorage从上一个页面带来参数，更改表单时不保存刷新页面会回到刚打开的状态，利于用户重新填写。

sessionStorage句法

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

实例

let params = {
    stuNo: this.state.stuNo,
    stuName: this.state.stuName,
    time: this.state.time
}
sessionStorage.setItem('studentParams',params); //key和value

let {location:{state:params}} = this.props;
if(!params) {
    params = JSON.parse(sessionStorage.getItem('studentParams')); //key
}else {
    sessionStorage.setItem('studentParams',JSON.stringify(params));
}
let stuNo = params.stuNo;
let stuName = params.stuName;
let time = params.time;