用户在前端页面登录成功后会从服务端获取Token，后续调用服务器的服务接口时都得带着Token，否则就会验证失败。之前使用postman测试的时候，获取Token后再调用其它服务都是人工将Token添加到Header中，网页中没法这么做，只能保存到某处，调用服务时再一并发送到服务端。
参考文献1-5中介绍了目前常用几种客户端浏览器中保存Token的方式，包括Cookie、Web Storage、内存等方式，各有优缺点。之前没有用过Web Storage，本文学习Web Storage的基本用法。
Web Storage包括localStorage和sessionStorage两种类型，前者存储数据后会一直存在，除非主动删除数据或者清除浏览器缓存，而后者则仅在session存在期间保存，会话结束后即被删除。关于localStorage和sessionStorage的更详细介绍请见参考文献7。
JavaScript代码中通过window.localStorage、window.sessionStorage访问或操作数据，它们都属于键值对结构，主要属性及函数如下：
1）length属性，获取当前保存的键值对数量；
2）getItem函数返回指定键的值，如果键不存在，则返回null；
3）setItem函数新增键值对或更新指定键的值；
4）removeItem函数删除指定键的值；
5）清空所有键值对。
最后是一个简单的验证示例（以localStorage为例，同样适用于sessionStorage），代码及效果截图如下：
<p id="support"></p>
<hr class="layui-bg-blue">
<div>a = <input type="text" id="a" /><div class="layui-btn" id="add_a">set</div><div class="layui-btn" id="show_a">show</div>
</div>
<script>layui.use(['layer'], function () {var layer = layui.layer;var $ = layui.jquery;if (window.localStorage) {$('#support').text('Support localStorage');}else {$('#support').text('not support localStorage');}$('#add_a').on('click', function () {window.localStorage.setItem("a", $('#a').val());});$('#show_a').on('click', function () {layer.msg(window.localStorage.getItem("a"));});});
</script>
为便于后续测试Token认证，还需将之前测试Cookie、Session认证的mvc项目改为WebApi，再修改之前的登录、主页等页面内容。
参考文献：
[1]https://blog.csdn.net/Andrew_Chenwq/article/details/143253009
[2]https://blog.csdn.net/Generon/article/details/72472414
[3]https://baijiahao.baidu.com/s?id=1802797209494794650&wfr=spider&for=pc
[4]https://juejin.cn/post/6922782392390746125
[5]https://blog.csdn.net/qq_42880714/article/details/134902437
[6]JavaScript网页编程从入门到精通
[7]https://blog.csdn.net/hxy771503/article/details/138280407
[8]https://html.spec.whatwg.org/multipage/webstorage.html#storage
