HTML5移动Web开发项目化实战教程 项目6 习题答案

1.localStorage对象和sessionStorage对象的区别及适用场景存储有效期localStorage：存储是持久化的，除非主动删除或通过代码清除，否则数据会一直保存在浏览器中，即使关闭浏览器或重启电脑也不会消失。sessionStorage：存储的有效期仅在当前会话（Session）内有效，当关闭当前浏览器标签页或窗口时，数据会被自动清除。作用域localStorage：在同源的所有标签页和窗口之间共享数据。sessionStorage：仅在当前标签页内有效，不同标签页之间不共享数据，即使是同一页面的不同标签页也不行。适用场景localStorage：适合需要长期保存且跨会话使用的数据，比如用户的偏好设置、主题选择、未完成的表单草稿（希望下次打开浏览器还能继续编辑）等。sessionStorage：适合临时保存且仅在当前会话中使用的数据，比如表单的临时输入（仅在当前页面有效，关闭页面就无需保留）、单页应用的状态缓存（页面刷新时恢复状态，但关闭标签页后不需要保留）等。2.清除localStorage数据的方法清除所有数据使用localStorage.clear()方法，该方法会清除当前域名下localStorage中存储的所有键值对数据。JavaScript

localStorage.clear();清除某个数据项使用localStorage.removeItem(key)方法，传入要删除的数据项对应的键名即可删除该数据项。JavaScript

//假设存储了键名为'username'的数据

localStorage.removeItem('username');3.ServiceWorker可以拦截的请求类型ServiceWorker作为一个独立于网页的脚本，运行在浏览器后台，它可以拦截以下类型的请求：网页资源请求：如HTML、CSS、JavaScript等页面本身依赖的资源文件请求。图片、字体等静态资源请求：包括页面中引用的图片、图标、字体文件等。AJAX和Fetch请求：页面发起的异步数据请求，比如通过fetch或XMLHttpRequest发送的API请求。导航请求：用户在浏览器中输入网址、点击链接等触发的页面导航请求。媒体资源请求：如音频、视频等媒体文件的请求。通过拦截这些请求，ServiceWorker可以实现缓存策略，比如在网络不可用时返回缓存的资源，从而提升页面的加载速度和离线体验。4.ServiceWorker的生命周期ServiceWorker的生命周期主要包括以下几个阶段：注册（Registration）：在网页JavaScript中调用navigator.serviceWorker.register()方法注册ServiceWorker脚本，浏览器会下载该脚本。安装（Install）：脚本下载完成后进入安装阶段，在这个阶段可以在install事件回调中缓存所需的静态资源，若缓存成功则安装完成，否则安装失败，ServiceWorker不会激活。JavaScript

self.addEventListener('install',(event)=>{

event.waitUntil(

caches.open('my-cache').then((cache)=>{

returncache.addAll(['/','/index.html','/style.css']);

})

);

});激活（Activate）：安装成功后进入激活阶段，在activate事件回调中可以清理旧版本的缓存，确保新版本的ServiceWorker能正常接管页面。JavaScript

self.addEventListener('activate',(event)=>{

event.waitUntil(

caches.keys().then((cacheNames)=>{

returnPromise.all(

cacheNames.filter((name)=>name!=='my-cache').map((name)=>caches.delete(name))

);

})

);

});运行（Idle/Fetch）：激活后，ServiceWorker处于等待状态，当页面发起网络请求时，会触发fetch事件，在该事件回调中可以决定是从缓存中返回资源还是发起网络请求。JavaScript

self.addEventListener('fetch',(event)=>{

event.respondWith(

caches.match(event.request).then((response)=>{

//优先返回缓存资源，没有则发起网络请求

returnresponse||fetch(event.request);

})

);

});更新（Update）：当检测到ServiceWorker脚本文件发生变化时，浏览器会重新下载并安装新版本，安装完成后会等待当前页面关闭后激活新版本，以避免影响正在运行的页面。销毁（Termination）：当ServiceWorker长时间处于空闲状态时，浏览器会自动终止它以节省资源，当有新的事件触发时会重新启动。5.实现对象存入LocalStorage并支持读取还原的函数JavaScript

//将对象存入LocalStorage

functionsaveToLocalStorage(key,obj){

try{

//将对象转换为JSON字符串存储

constjsonStr=JSON.stringify(obj);

localStorage.setItem(key,jsonStr);

returntrue;

}catch(error){

console.error('保存数据到LocalStorage失败:',error);

returnfalse;

}

}

//从LocalStorage读取并还原对象

functiongetFromLocalStorage(key){

try{

constjsonStr=localStorage.getItem(key);

if(jsonStr){

//将JSON字符串解析为对象

returnJSON.parse(jsonStr);

}

returnnull;

}catch(error){

console.error('从LocalStorage读取数据失败:',error);

returnnull;

}

}

//示例使用

constuser={name:'张三',age:25,isAdmin:false};

saveToLocalStorage('userInfo',user);

constsavedUser=getFromLocalStorage('userInfo');

console.log(savedUser);//输出: