【课程预告】Html 5 网络存储之 LocalStorage、SessionStorage

继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的信息。

• localStorage 本地存储

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

<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>

• SessionStorage 会话存储

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