以下为自学笔记内容，仅供参考。

转发请保留原文链接：https://www.cnblogs.com/it-dennis/p/10503539.html

什么是Web存储

cookie最大的缺陷是在每一次HTTP请求中都会携带所有符合规则的cookie数据.这会增加请求响应时间,特别是XHR请求. 在HTML5中使用sessionStorage和localStorage代替cookie是更好的做法.这两种都属于web storage，相较于cookie更加安全和快速。数据不会保存在服务器上，可以存储大量的数据而不影响服务器的性能。

Web存储的两种方式

local storage

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

session storage

针对一个 session 的数据存储。当用户关闭浏览器窗口后，数据会被删除。

API

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

参考资料

https://www.w3cschool.cn/html5/html5-webstorage.html

https://www.w3cschool.cn/tanzt0/af72kozt.html

希望可以帮助到你，如有问题可以留言或者点击下方图片联系我！

【我的前端自学之路】【HTML5】web 存储的更多相关文章

  1. 一个「学渣」从零开始的Web前端自学之路

    从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...

  2. 【我的前端自学之路】【HTML5】.html和.htm的区别

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10508171.html .htm 和 .html 的区别 .htm 和 ...

  3. 我的web前端自学之路-心得篇：我为什么要学习web前端？

    时光如流水,转眼间,自己已经是大三的学长了,看着一个个学弟学妹,心中有种莫名的感觉,很怀念大学的前两年时光,但也很憧憬着自己的未来,自己将要去经历很多从未经历的事.我是我们学校信科院的一名学生,在编程 ...

  4. 有趣的HTML5 Web 存储

    HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...

  5. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  6. HTML5 web 存储

    简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...

  7. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

  8. 面试之HTML5 Web存储

    前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别) HTML5 Web存储,一个比 cook ...

  9. HTML5: HTML5 Web 存储

    ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...

随机推荐

  1. 踢爆IT劣书出版黑幕——由清华大学出版社之《C语言入门很简单》想到的（1）

    1.前言与作者 首先声明,我是由于非常偶然的机会获得<C语言入门很简单>这本书的,绝对不是买的.买这种书实在丢不起那人. 去年这书刚出版时,在CU论坛举行试读推广,我当时随口说了几句(没说 ...

  2. 测试用例生成工具ALLPAIRS(转)

    ALLPAIRS是一个测试用例设计工具,用于Windows,但移植到了多种平台,以适应该脚本文件的一些小改动.它自动对所有实验技术进行设计,通过这个工具的方法可以在海量的数据组合中选择少量的数据生成测 ...

  3. [iOS微博项目 - 1.4] - 各种item NavigationBar &amp; NavigationItem &amp; BarButtonItem || TabBar &amp; TabBarItem

    一.UINavigationItem1> 获得方式self.navigationItem // self是指控制器2> 作用可以用来设置当前控制器顶部导航栏的内容// 设置导航栏中间的内容 ...

  4. Android图像处理2

    此次实验主要通过Android中的方法获取输入的颜色矩阵的值,更改后赋值给图片中的颜色矩阵更改图片效果.具体的布局的方法跟笔记1种差不多,只不过这里要添加一个供用户输入的GridView <Gr ...

  5. WINCE平台下C#应用程序中使用看门狗

    看门狗定时器(WDT,Watch Dog Timer)是单片机的一个组成部分,它实际上是一个计数器,一般给看门狗一个大数,程序开始运行后看门狗开始倒计数.如果程序运行正常,过一段时间CPU应发出指令让 ...

  6. Visual Studio 2015 Professional 破解

    Visual Studio 2015 Professional 版本 破解序列号:HMGNV-WCYXV-X7G9W-YCX63-B98R2

  7. jquery里的attr()方法和prop()方法的区别

    在jq的高版本里出现了prop()方法,那么attr()和prop()的区别在哪呢?这两者分别在什么情况用呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们 ...

  8. codeM美团编程大赛初赛B轮D题

    [编程题] 模 时间限制:1秒空间限制:32768K 给定四个正整数a,b,c,k,回答是否存在一个正整数n,使得a*n在k进制表示下的各位的数值之和模b为c.输入描述:第一行一个整数T(T < ...

  9. websocket是如何进行建立连接与通信的?(简单理解)

    握手过程: websocket-client端通过ws协议向websocket-server端发起连接请求前,首先在自己的请求头中添加Sec-Websocket-Key键值对,值为根据自己账号通过一定 ...

  10. EF多字段求和（分组/不分组）

    分组多字段求和 query.GroupBy(q => new { q.Year, q.Month }) .Select(q => new { Year = q.Key.Year, Mont ...