第六周周结

Posted 2020-07-03

在html5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能。Web的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样，最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，但是cookie有很多的不足例如大小被控制在4KB，带宽也会不足，复杂度操作起来也比较麻烦，在这种情况下HTML5就重新提供了一种客户端本地保存数据的功能，他就是Web Srorage功能，顾名思义他就是Web上存储数据的功能，而这里的存储，是针对客户端本地而言的，它包含两种不同的存储类型，一个是Session Storage和Local Storage，这两张存储数据的功能相比Cookies有明显的优势，他存储空间有5MB，sessionStorage是将数据存储在session中的，所谓的session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。Session对象可以用来保存在这段时间内所要求保存在任何数据。LocalStorage是讲数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。他们两个的区别就是一个是临时保存，一个却是永久保存。这一周学了一种存储类型的实例是计数器，本例主要是通过sessionstorage和localstorage对页面访问量进行计数。当在文本框内输入数据后，分别可以单击“session保存”和“local保存”按钮对数据进行保存，还可以通过“session读取”和“local读取”按钮对数据进行读取。但是两种方法对数据的处理方式不一样，使用sessionstorage方法时，如果关闭了浏览器，这个数据就丢失了，下一次打开浏览器，点击读取数据按钮时，读取不到任何数据。使用localstorage方法时，即使浏览器关闭了，下次打开浏览器时仍然能够读取保存的数据。但是，数据保存是按不同的浏览器分别进行的，也就是说，如果打开别的浏览器，是读取不到在这个浏览器中保存的数据的。