JavaScript sessionStorage 怎么用
在网页上填了一半的表单，突然不小心关掉了页面，重新打开后居然还要重新填？这种糟心的经历很多人都碰到过。其实前端有个很实用的小工具，能帮你解决这类临时数据的保存问题，它就是sessionStorage。
什么是sessionStorage？
你可以把sessionStorage想象成网页的“临时储物柜”，它只在当前浏览器标签页打开时生效——就像你在超市存包，存的东西只能在这个储物柜对应的柜子里取，而且一旦你关掉这个标签页，柜子里的东西就会自动消失，不会带到下一次打开的页面里。
和我们常听到的localStorage不一样，localStorage的东西会一直存在浏览器里，除非手动删除；而sessionStorage是“用完就扔”的临时存储，刚好适合保存只需要这次浏览用的数据，不会占用长期存储空间。
怎么存数据到sessionStorage？
存数据的操作特别简单，就像往储物柜里放东西，只要给要存的数据起个名字（相当于柜子的编号），再把数据放进去就行。举个生活化的例子：你在网页上做了一个“待办清单”，想临时保存刚加的任务，就可以这么写代码：
`javascript
// 存一个待办任务，名字叫"todo1"，内容是"买牛奶"
sessionStorage.setItem("todo1", "买牛奶");
`
这里的“setItem”就是“放东西”的方法，第一个参数是你给数据起的键名，第二个是要存的内容。内容可以是文字、数字，甚至简单的数组，就像你可以往储物柜里放不同类型的物品。
怎么取存好的数据？
放进去之后，要用的时候拿出来就行，就像你记得柜子编号，就能取出里面的东西。还是用待办清单的例子，要取出刚才存的“买牛奶”任务，代码是：
`javascript
// 取出键名为"todo1"的数据
const myTodo = sessionStorage.getItem("todo1");
console.log(myTodo); // 控制台会输出"买牛奶"
`
如果这个编号的柜子里没东西，取出来就是null，相当于你找了个空柜子，什么都拿不到。
怎么删改数据？
有时候你可能需要更新待办任务，比如把“买牛奶”改成“买纯牛奶”，直接用同样的键名存新内容就行：
`javascript
// 更新键名为"todo1"的数据
sessionStorage.setItem("todo1", "买纯牛奶");
`
这就相当于把旧的东西拿出来，换成新的放回去。如果任务完成了，要删掉这个临时数据，就用“removeItem”：
`javascript
// 删除键名为"todo1"的这条数据
sessionStorage.removeItem("todo1");
`
要是想清空这个标签页里所有存的临时数据，就用“clear”，相当于把整个储物柜清空。
实际用的小场景
除了刚才说的表单临时保存，sessionStorage还有很多实用的小用法。比如：你做了一个多步骤的答题页面，每答完一题可以把当前的答案存到sessionStorage里，就算不小心切了别的页面，回来也不用重新做这题；或者一个小的购物车，只保存这次浏览时选的商品，关掉页面就清空，不会留着占空间。
不过要注意，sessionStorage是和浏览器标签页绑定的，你在A标签页存的数据，在B标签页是拿不到的，就像你不能用超市的另一个柜子拿东西。而且它能存的数据大小有限，一般是5MB左右，适合存少量临时数据，太大的文件还是得用别的方法。