Html5的从0到1-Html5的web Storage概述（1

在html5中除了canvas，另外一个非常重要的功能是客户端本地存储web storage，之前可以在用户端Cookies存贮用户名等信息，后来发现Cookies存储存在以下问题：

大小：Cookies的大小被限制在4kb左右

带宽：Coolies是随着Http业务被一起发送的，因此会浪费一部分带宽

复杂性：要正确的操作Cookies是很苦难的

针对以上问题，html5提出了一种在本地保存数据的方法：web storage

它有两种处理方式：

session storage：将数据保存在session对象中。session是用户打开这个网站到关闭这个网站，所经历的时间，也就是用户浏览网站的时间。session对象可以保存这段时间所有的数据。

local storage：将数据保存在客户端的硬件（硬盘）中，即使用户的浏览器关闭了。下次打开时候，也会重新加载

session storage实例

index.html代码

appWeb代码

！！！！效果图

local storage的实例

index代码没变，js代码

效果图

感谢阅读

喜欢小编文章的，可以点个订阅，小编都会不停更新文章，分享前端学习知识，以及程序员的趣事！

在这里给大家分享一下，我是一名5年前端工程师，自己根据这几年从事前端的经验，整理一套系统的前端教程（基础+案例+工具），跟大家分享下我的成果，进群：731＋771＋211，群里不停更新最新的教程和学习方法（进群送web前端系统学习路线，详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。