web前端：Web前端存储之sessionStorage和localStorage
软工小法师
2024-04-23 23:05
前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及Javascript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
对浏览器来说，使用WebStorage存储键值对比存储Cookie方式更直观，而且容量更大，它包含两种：localStorage和sessionStorage
sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器的此标签页打开期间存在，包括此标签页的页面重新加载
localStorage（长期存储）：与sessionStorage一样，但是浏览器关闭后，数据依然会一直存在
localStorage和sessionStorage的存储数据大小一般都是：5MB
用法说明：sessionStorage和localStorage的用法基本一致，引用类型的值需要转换成JSON进行存储
1.保存数据到本地
letobj={
name:'xiaoming',
age:18,
birthday:'2000-01-01',
}
sessionStorage.setItem('userInfo',JSON.stringify(obj))
localStorage.setItem('userInfo',JSON.stringify(obj))
注：若第二次存储的key值与第一次存储的key值相同，则会覆盖第一次的值。
2.从本地读取数据
letobj1=JSON.parse(sessionStorage.getItem('userInfo'))
letobj2=JSON.parse(localStorage.getItem('userInfo'))
3.从本地删除指定key值
sessionStorage.removeItem('userInfo')
localStorage.removeItem('userInfo')
4.清空存储的所有值
sessionStorage.clear()
localStorage.clear()
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
![web前端：[前端第六课]HTML5表单和php环境搭建](https://static.528045.com/imgs/44.jpg?imageMogr2/format/webp/blur/1x0/quality/35)
