Session Storage 和 Local Storage 的用法差不多 … 使用 setItem() 去设置存储的数据 … 用 getItem() 去获取存储的数据 … removeItem() 移除数据项目 … 用 clear() 清空数据项目 ..

不过他们之间还是有一些区别的 … 比如 Local Storage 的数据会一直保留 … 除非通过应用清除掉他们 … 或者用户手工去清除他们 …

而 Session Storage 的数据在用户关掉浏览器标签或者窗口的时候就会被清除掉 …

另外 Session Storage 可以单独为每一个窗口或者标签去设置存储数据 … 即使文档的来源是一样的 … 不同窗口之间也不能互相访问彼此的 Session Storage 数据 …

下面我们还是通过几个演示再来理解一下 Session Storage ..

准备

先去准备一下 .. 打开 index.html … 这里我把页面分成了两部分 .. 左边可以显示存储数据 .. 右边可以通过一个表单去设置存储数据 …

这个表单上面定义了一个 set-form 的 ID　.. 它的里面有两个 input 元素 .. 一个叫 name … 一个是 gender …

用户可以在这两个文本框里输入内容 … 然后点击 设置数据项目 … 可以把输入的内容设置成 sessionStorage 数据 …

同时设置的数据会显示在页面的左边 ..

script.js

打开 script.js … 这是在之前的视频里我们用到的代码 … 我们可以直接把这里的所有的 localStorage … 替换成 sessionStorage …

这里我用的是 brackets 编辑器 … alt + command + f .. 可以去查找并替换 … 或者可以点击 编辑 菜单 ... 找到 替换 ...

先输入想要查找的内容 … localStorage … 再输入要替换成的那个内容 ...

再输入想要替换成的内容 … sessionStorage … 这里要注意大小写 ..

回车 … 点击 所有 … 再点一下 Replace .. 替换 ..

修改

下面我们还得修改几个地方 … 之前点击 设置数据项目 按钮以后 ，执行 setStorage … 会设置固定的数据值 … 这里我们需要根据用户在 name 还有 gender 这两个文本框里输入的内容 … 动态的去设置存储数据 …

在这个 setItem 这里 … 修改一下要设置的值 ..

我们先去获取到表单元素 … 给它命名一下 …

var setForm = document.getElementById("set-form");

表单里的所有的元素会在 emements 里面 …. 使用元素的索引值 … 或者元素的名称可以访问表单里的元素 …

这个 name 数据的值 .. 可以设置成 setForm.elements["name"].value

它的意思就是 .. 得到 setForm 表单里的 name 这个元素里的值 … 也就是用户通过这个文本框 .. 输入的内容 …

同样的方法再设置一下 gender 数据的值 …

setForm.elements["gender"].value

其它的我们先不用动 ….

测试

在浏览器里打开这个文档 … 输入姓名 … 王皓 … 性别 … 男 ... 然后点击 设置数据项目 …

在页面的左边 … 会显示设置的 sessionStorage 数据 … 再打开开发者工具 …

Resources … Session Storage …

在这里同样可以找到设置的 sessionStorage ….

下面我们关闭这个浏览器标签 …

然后再打开这个文档 …

在页面的左边 … 就不会再显示刚才设置的 sessionStorage 数据了 … 因为 sessionStorage 数据在关掉浏览器标签或者窗口的时候，会自动清除掉 ….

不过有一种情况是个例外 .. 有些浏览器可以自动恢复关闭以前打开的标签 … 恢复以后 sessionStorage 数据仍然会存在 …

Chrome 浏览器就有这个功能 … 打开这个自定义和控制按钮 … 选择 设置 …

在 启动时 这个区域里面 … 选择 继续浏览上次关闭浏览器时在看的网页 …

下面再去设置一下 sessionStorage … 姓名 … 王皓 … 性别 … 男 … 点击 设置 …

然后我们可以关掉浏览器 …

可以使用快捷键 command + q … windows 有户可按一下 ctrl + q …

再打开 chrome 浏览器 …

页面左边仍然会显示之前设置的 sessionStorage 数据 …

不同标签

sessionStorage 还可以让我们在不同标签上设置不同的数据 … 新建一个标签 …

输入姓名 … 小雪 … 性别 … 女 … 点击 设置 …

页面左边会显示出设置的 sessionStorage … 姓名 小雪 … 性别 女 ...

回到之前的标签 … 刷新 …

仍然会显示之前设置的 sessionStorage 数据的内容 …