保存自己收藏的頁(yè)面為html文件，放在電腦的桌面上

語(yǔ)：有時(shí)候在電腦上網(wǎng)的時(shí)候看見(jiàn)自己喜歡的網(wǎng)站或特別的頁(yè)面，自己已經(jīng)點(diǎn)擊電腦屏幕上方的星號(hào)收藏這個(gè)頁(yè)面了，但有時(shí)候看收藏夾又被密密麻麻的內(nèi)容弄得頭昏眼花，這時(shí)，我的處理方法是把收藏的頁(yè)面導(dǎo)出來(lái)，新建文件夾分類整理好，這樣下次想看什么內(nèi)容就不用只看收藏夾里小小的字，而是在文件夾中能夠清楚的，按照自己的習(xí)慣，分好類別的，整潔的頁(yè)面了。下面是具體操作，根據(jù)提示的1、2、3······進(jìn)行操作，就可以了。

首先打開(kāi)瀏覽器。找到自己喜歡的頁(yè)面，我打開(kāi)了自己的收藏夾，找到自己喜歡的頁(yè)面。然后點(diǎn)擊文字跳轉(zhuǎn)到具體的那個(gè)喜歡的頁(yè)面。

然后點(diǎn)擊屏幕上方，瀏覽器的三個(gè)點(diǎn)“···”。

然后點(diǎn)擊“更多工具”。

然后點(diǎn)擊“將頁(yè)面另存為”。

選擇文件夾，把頁(yè)面保存下來(lái)。

最后打開(kāi)電腦你保存文件在什么地方，就能在該地方找到保存的喜歡頁(yè)面，該頁(yè)面在文件夾里保存的形式為“html”文件。

地存儲(chǔ)

1 本地存儲(chǔ)簡(jiǎn)介

在客戶端存儲(chǔ)數(shù)據(jù)

HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：

localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)

sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)

之前, 這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ), 因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來(lái)傳遞, 這使得 cookie 速度很慢而且效率也不高。

HTML5 使用 JavaScript 來(lái)存儲(chǔ)和訪問(wèn)數(shù)據(jù)。

2 語(yǔ)法

localStorage 方法存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后, 數(shù)據(jù)依然可用。

localStorage 和sessionStorage分別是本地存儲(chǔ)和會(huì)話存儲(chǔ), 統(tǒng)稱本地存儲(chǔ)。

存儲(chǔ)數(shù)據(jù)：localStorage.setItem('key','value');

讀取數(shù)據(jù)：localStorage.getItem('key')

刪除指定數(shù)據(jù)：localStorage.removeItem('key');

清空所有數(shù)據(jù)：localStorage.clear()

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!--
本地存儲(chǔ)存在自己電腦上了 他不能和服務(wù)器交互
一種：本地存儲(chǔ)(永久存儲(chǔ)不會(huì)過(guò)期)localStorage
一種：臨時(shí)會(huì)話(頁(yè)面關(guān)閉數(shù)據(jù)就沒(méi)了)sessionStorage
統(tǒng)稱本地存儲(chǔ)
二者的方法一毛一樣 咱們只以一個(gè)舉例子

cookie->可以喝服務(wù)器交互 是可以設(shè)置過(guò)期時(shí)間的
-->
<script type="text/javascript">
console.log(localStorage)
console.log(sessionStorage)

//寫入東西(隨便寫,你存儲(chǔ)的值)
//localStorage.setItem(key(小卡片),value(你存的包))

localStorage.setItem("key001","梁永燦");
localStorage.setItem("key002","迪麗熱巴");
localStorage.setItem("key003","楊穎");
localStorage.setItem("key004","大黃");
localStorage.setItem("key004","小黃");


//讀取
console.log(localStorage.getItem("key001"))
//console.log(localStorage)

//刪除
localStorage.removeItem("key001");

//全部刪除
localStorage.clear()


</script>
</body>
</html>

本地存儲(chǔ)數(shù)據(jù)庫(kù)會(huì)自動(dòng)的為每一個(gè)網(wǎng)站(IP地址)建立一個(gè)獨(dú)立的表格, 在同一個(gè)網(wǎng)站(IP地址)下數(shù)據(jù)是可以共享的, 但是不能跨域。

不能跨瀏覽器存儲(chǔ), 每個(gè)瀏覽器都有自己的小數(shù)據(jù)庫(kù), Chrome存儲(chǔ)的, 火狐看不見(jiàn)。

localStorage是簡(jiǎn)單的數(shù)據(jù)庫(kù), 沒(méi)有查詢功能, 不能用sql操作, 只能簡(jiǎn)單的存儲(chǔ)、讀取k-v對(duì)。

sessionStorage 瀏覽器窗口一旦關(guān)閉, 數(shù)據(jù)就丟失了

localStorage存儲(chǔ)的數(shù)據(jù), 永遠(yuǎn)不丟失, 關(guān)機(jī), 重啟都不會(huì)導(dǎo)致數(shù)據(jù)丟失, 除非清除了瀏覽器記錄

注意: 判斷l(xiāng)ocalStorage和sessionStorage是否有數(shù)據(jù)使用if直接判斷

if(localStorage.getItem("key001")){
}

不能使用

在線咨詢

上一篇：今日HTML小知識(shí)-2：設(shè)置顏色透明
下一篇：架構(gòu)基礎(chǔ)之了解一下HTTP協(xié)議

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

保存自己收藏的頁(yè)面為html文件，放在電腦的桌面上

您的項(xiàng)目需求