webStorage

阅读量：6341 次

发布时间：2019-06-22

本文共 3104 字，大约阅读时间需要 10 分钟。

1、HTML5中的本地存储概念是什么？

很多时候我们会存储用户本地信息到电脑上，例如：比方说用户有一个填充了一半的长表格，然后突然网络连接断开了，这样用户希望你能存储这些信息到本地，当网络恢复的时候，他想获取这些信息然后发送到服务器进行存储现代浏览器拥有的存储被叫做“LocalStorage”,你可以存储这些信息

2、本地存储的生命周期是什么？

本地存储没有生命周期，它将保留知道用户从浏览器清除或者使用Javascript代码移除

3、本地存储和cookies之间的区别

4、webStorage

在H5中webStorage其实就是在web上存储数据，分为两种：

sessionStorage 在浏览器关闭时存储的数据将消失---临时存储

localStorage 可以一直存在 --- 永久存储

5、webStorage写法

1、储存：localStorage.setItem(key,value);

localStorage.key = value;//key、value为键值对形式，key作为唯一标识，value做位置，不建议使用这一种，但是别不认识

注：如果key存在时，更新value

2、获取数据：localStorage.getItem(key);

localStorage.key //不建议使用这一种，但是别不认识

注：如果key不存在返回null

3、删除：localStorage.removeItem(key);

注：一旦删除，key对应的数据将会全部删除

4、全部清除：localStorage.clear();

注：某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据

5、遍历localStorage存储的key

.length 数据总量，例：localStorage.length

.key(index) 通过索引获取key值，例：var key=localStorage.key(index);

6、存储JSON格式数据

总结：如果需要判断是否支持本地存储，可以通过window.sessionStorage或者window.localStorage去判断。

6、离线缓存

1、应用场景：

a）、离线浏览--缓存数据（新闻、阅读、视频）

b）、本地保存用户的操作数据（邮箱软件----离线编辑、在线发送）

2、HTML5提供的数据持久化技术：

a）、Application Cache 本地缓存所应用的文件

b）、WEB SQL 关系型数据库，通过SQL数据访问

c）、IndexDB 索引数据库

3、Application Cache

a）、Manifest文件

b）、Application Cache文件

c）、特点

Manifest文件必须有变化才更新

一次必须更新Manifest文件中的所有文件

下次才生效

7、多媒体（video/audio）

1、应用场景：

1、常见的视频格式视频的组成部分：画面、音频、编码格式视频编码：H.264、theora、VP8(google开源)

2、常见的音频格式编码：AAC、MP3、Vorbis

3、HTML5虽然能在完全脱离插件的情况下播放音视频，但不是支持所有的格式支持的视频格式： OGG = 带有Theora视频编码+Vorbis音频编码的ogg文件浏览器支持：F,C,O MPEG4 = 带有H.264视频编码+AAC音频编码的MPEG4文件浏览器支持:S,C WebM = 带有VP8视频格式编码+Vorbis音频编码的WebM格式浏览器支持:I、F、C、O

4、视频Video的使用方法

< video src="文件地址" controls="controls">

您的浏览器暂不支持video标签。播放视频

</ video >

< video controls="controls" width="300">

您的浏览器暂不支持video标签。播放视频

</ video >

5、video常见属性

6、video常见方法

7、video的API属性8、audio支持的格式 HTML5支持的音频格式：

Ogg 免费支持的浏览器:C、F、O

MP3 收费支持的浏览器: I、C、S