使用sessionStorgesessionStorage属性允许您访问会话存储对象。与localStorage类似,只是localStorage中存储的数据没有过期时间设置,而sessionStorage中存储的数据会在页面会话结束时清空。只要浏览器打开,页面会话就会一直保持,重新加载或恢复页面仍将保持原始页面会话。当在新选项卡或窗口中打开页面时,将在顶级浏览上下文中初始化新会话,这与会话cookie的工作方式不同语法//将数据保存到sessionStoragesessionStorage.setItem('key','value');//从sessionStorage中获取数据vardata=sessionStorage.getItem('key');//从sessionStorage中删除保存的数据sessionStorage.removeItem('key');//从sessionStorage中删除所有保存的数据sessionStorage.clear();示例//获取文本输入框varfield=document.getElementById("field");//检测是否有autosave键值//(偶尔刷新页面时会存在)if(sessionStorage.getItem("autosave")){//恢复文本输入框的内容field.value=sessionStorage.getItem("autosave");}//监听文本输入框的变化事件field.addEventListener("change",function(){//将结果保存到sessionStorage对象sessionStorage.setItem("autosave",字段.值);});使用localStorage只读localStorage允许您访问Document的远程(原始)对象存储;数据存储为跨浏览器会话。localStorage类似于sessionStorage。不同的是,localStorage中存储的数据是不确定的,当页面session结束——即页面关闭时,sessionStorage中存储的数据会被清空语法//setlocalStorage.setItem('myCat','Tom')//读取letcat=localStorage.getItem('myCat');//移除localStorage.removeItem('myCat');//移除所有localStorage.clear();示例函数setStyles(){varcurrentColor=localStorage.getItem('bgcolor');varcurrentFont=localStorage.getItem('font');varcurrentImage=localStorage.getItem('image');document.getElementById('bgcolor').value=currentColor;document.getElementById('font').value=currentFont;document.getElementById('image').value=currentImage;htmlElem.style.backgroundColor='#'+currentColor;pElem.style.fontFamily=currentFont;imgElem.setAttribute('src',currentImage);}
