本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，

同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，

HTML5规范提出了相关解决方案。

特性

设置、读取方便容量较大，sessionStorage约5M、localStorage约20M只能存储字符串，可以将对象JSON.stringify() 编码后存储window.sessionStorage

生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享window.localStorage

永久生效，除非手动删除（服务器方式访问然后清除缓存）可以多窗口（页面）共享方法

setItem(key, value) 设置存储内容getItem(key) 读取存储内容removeItem(key) 删除键值为key的存储内容clear() 清空所有存储内容

《QQ TIM》案例

Stellar插件

描述

视差滚动（Parallax Scrolling）指网页滚动过程中，

多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术

主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。

这种效果可以给网站一个很好的补充。特性

视差滚动效果酷炫，适合于个性展示的场合。视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。视差滚动容易迷航，需要具备较强的导航功能。

原理

传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，

而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。

有的时候也可以加上一些透明度、大小的动画来优化显示。利用background-attachment属性实现。

使用步骤

引用文件

~html

~

html结构

<div class="content" id="content1"><p>TEXT HERE</p></div><div class="content" id="content2"><p>TEXT HERE</p></div><div class="content" id="content3" data-stellar-background-ratio="0.5"><p>TEXT HERE</p></div><div class="content" id="content4" data-stellar-background-ratio="0.5"><p>TEXT HERE</p></div><div class="content" id="content5" data-stellar-background-ratio="0.5"><p>TEXT HERE</p></div><div class="content" id="content6" data-stellar-background-ratio="0.5"><p>TEXT HERE</p></div>

基本样式

~~~css

.content {

background-attachment: fixed;

height: 400px;

}

content1 {

background-image: url("..");

}

content2 {

background-image: url("..");

}

content3 {

background-image: url("..");

}

content4 {

background-image: url("..");

}

content5 {

background-image: url("..");

}

content6 {

background-image: url("..");

}

~~~

js初始化

~javascript

$.stellar({

horizontalScrolling: false,

responsive: true

});

~参数解释

完成视觉滚动差页面开发

模块一: 导航(nav)模块二: 宣传(banner)模块三: 语音聊天(sound)模块四: 文件传输(file)模块五: 兴趣部落(interest)模块六: 底部(footer)