web storage

Posted 2020-09-17 小牧临风

web storage
html4中使用cookies在客户端保存诸如用户名等简单的信息，但是，使用cookies存储永久数据存在以下问题：
大小：cookies的大小限制在4KB
带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽
复杂性：正确的操纵cookies是很困难的

HTML5重新提供了一种在客户端本地保存数据的功能，Web Storage
Web Storage功能，就是在Web上存储数据，分为两种：
sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，session对象可用来保存在这段时间内所要求保存的任何数据
localStorage：将数据保存在客户端本地的硬件设备中，即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可用

区别：sessionStorage为临时保存，localStorage为永久保存

HTML5中提供了localStorage对象可以将数据长期保存在客户端，直到人为清除。localStorage提供了几个方法:
1、存储：localStorage.setItem(key,value)
如果key存在时，更新value

2、获取：localStorage.getItem(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格式数据
JSON.stringify(data)  将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象，返回解析后的对象

----------------------------------------

地理定位
地理定位对象
navigator.geolocation
得到当前位置
navigator.geolocation.getCurrentPosition()
监听位置的变化
navigator.geolocation.watchPosition()
移除监听
navigator.geolocation.clearWatch()

----------------------------------------
媒体查询

媒体类型
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech ‘听觉‘类似的媒体类型
tty 不适用像素的设备
tv 电视

关键字
and
not not关键字是用来排除某种制定的媒体类型
only only用来定某种特定的媒体类型

媒体特性
(max-width:600px)
(max-device-width: 480px) 设备输出宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips

样式引入
方式1：
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
方式2：
@import url("css/reset.css") screen;
方式3：
@media screen{
选择器{
属性：属性值；
}
}

---------------------------------

rem(font size of the root element)：是指相对于根元素的字体大小的单位

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

---------------------------------