继Chapter3学习了注册页面的学习后，我们还未对保存按钮实现作用，下午的课将会利用cookie技术储存数据。
网络存储 简述
1、HTML 中，为了在本机存储用户数据，通常使用 JavaScript cookie。HTML 5 开始引入了 Web 存储，网站利用它在本机上存储用户数据。
2、cookie中每条cookie的存储空间为4k，localStorage 中一般浏览器支持的是5M大小
3、与 Cookie 相比，Web 存储的优点是：◈ 更安全 ◈ 更快 ◈ 能存储更多的数据
4、有两种类型的 Web 存储对象：
☉ localStorage(本地存储) ----- 存储没有到期日期的数据，即永久存储（但手动清除会消失）。
☉ sessionStorage(会话存储) ----- 仅存储一个会话的数据，临时存储。
5、不同浏览器无法共享 localStorage 或 sessionStorage 中的数据。相同浏览器中同一个目标服务器下的所有应用的页面间可以共享 localStorage数据，不同页面或标签页间无法共享sessionStorage的信息。
1、localStorage 拓展了 cookie 的 4K大小 限制
2、localStorage 可以将第一次请求的数据直接存储到本地，相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，现在主流浏览器高版本基本都是支持的
3、采用key-value方式进行存储，类似Java的map，当key重复时会直接覆盖
4、目前所有的浏览器中都会把 localStorage 的值类型限定为string类型，通常需要使用 JavaScript 函数（如 parseInt() 和 parseFloat()）进行转换，以及JSON转换
5、localStorage 在浏览器的隐私模式下不可读取
6、浏览器如果清理了缓存，那么localstorage保存的数据库也就不复存在了
-
增删改查操作
存储数据
1、注意事项：无论存储的值之前是什么类型，如数字、json、数组等等，存储之后，都会是字符串类型
2、当存储的 key 已经存在时，则直接覆盖 value，类似 Java 中的 map
[qzdypre]<script type="text/javascript">
/**
* 判断浏览器是否支持localStorage
* 通常都是可以支持的
*/
if (window.localStorage) {
console.log("当前浏览器支持localStorage...");
/**
* 获取localStorage对象
* @type {Storage}
*/
let localStorage = window.localStorage;
/**存值方式1 ———推荐方式*/
localStorage["name"] = "张无忌";
/**存值方式2 ———不推荐*/
localStorage.age = 120;
/**存值方式3 ———推荐方式*/
localStorage.setItem("address","广东深圳");
} else {
console.log("当前浏览器不支持localStorage...");
}
</script>[/qzdypre]
1、SessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
2、在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。完全类似localStorage对象的获取
seesionStorage 与 localStorage 一样采用key-value方式存储。key值相同时，新增的覆盖原有的。value值必须为字符串类型(传入非字符串，也会在存储时转换为字符串，如true值会转换为"true")。
3、sessionStorage 与 localStorage 一样，大多数浏览器把存储大小上限限制在5MB以内
4、不同浏览器无法共享 localStorage或sessionStorage中的数据。相同浏览器中同一个目标服务器下的所有应用的页面间可以共享 localStorage，不同页面或标签页间无法共享sessionStorage的信息。
5、sessionStorage 和 localStorage 使用完全相同的API
文章评论