浏览器有个实用的性能，然而可能用的频率不高，就是书签/珍藏的导入和导出，因为当初个别浏览器都有云同步性能，所以这个性能存在感不强。
浏览器书签是能够跨不同的浏览器导入的，所以意味着导出的文件必定是有一个标准的，我简略搜了一下没有搜到，可能是各家约定俗成的标准，并没有一个正式的规范。
通用的数据交换格局有很多，比方xml、json、yaml，json应该是应用最宽泛的，因为易于解析和存储，尺寸也不大，所以很适宜浏览器书签的导出，然而，实际上古代浏览器导出的书签文件是html文件。起因不详，也没有搜到相干信息，我猜想起因可能是html文件绝对于json来说，普通用户更为相熟，其次，html文件能够间接应用浏览器关上，当然，json文件也能够应用浏览器关上，然而可能间接点击的时候默认是用文本编辑器关上的，另外它们在浏览器的出现形式也不一样，html显示的是一个一般的带有一堆超链接的页面，就是一个有点丑的网页，而json关上有点相似源码，不太敌对，因为个别用户导出书签就是为了在另一个浏览器导入，所以屏蔽细节并没有什么问题。
html和xml是相似的，所以解析和传输也很简略，接下来看一下实例：
根本构造如上，每个文件夹下都有个书签，导出的书签源码如下：
简略剖析一下：
1.标签字母都是大写
2.DOCTYPE申明和一般HTML页面不同
3.应用DL和DT来组织书签，DL代表一个文件夹的内容列表，DT代表一个内容，可能是书签也可能是文件夹，文件夹的话会有一个H3标签来示意书签的名字，书签的话就是间接跟一个A标签，DL标签后都跟了一个小写的p标签，有局部标签没有闭合
4.H1标签之前的都和书签内容没有什么关系
5.文件夹名称H3标签和超链接A标签都有ADD_DATE和LAST_MODIFIED来保留工夫信息，该属性不存在也不影响
6.文件夹名称H3标签的属性PERSONAL_TOOLBAR_FOLDER来示意该文件夹下的内容是否显示到浏览器的工具栏，否则会默认放到浏览器的其余文件夹里，但也不肯定，有的浏览器会有本人的行为
7.网页的题目icon会转换为base64格局放到ICON属性上，这个属性不存在也不影响
html其实就是一般字符串，所以能够手动生成，常见于一些导航网站和网址珍藏工具的导出性能，如形形色色导航（http://lxqnsys.com/d），有一个须要留神的中央，就是html字符串必须格式化带换行和缩进，下图这种压缩过的是不行的：
生成形式也很简略，书签是树结构，所以递归循环拼接即可。
先看一下书签数据的格局，疏忽工夫和icon：
let bookmarks = [ { name: '',// 文件夹或书签名字 toolbar: true,// 是否显示到工具栏 folder: true,// 是否是文件夹 children: [ { name: '', folder: true, children: [] }, { name: '',// 书签名称 url: ''// 书签url } ] }]应用ES6的话能够间接应用模板字符串``来带换行的拼接，很不便：
function createBookmarksStr (bookmarks) { let str = ` <!DOCTYPE NETSCAPE-Bookmark-file-1> <!-- This is an automatically generated file.It will be read and overwritten.DO NOT EDIT! --> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <TITLE>Bookmarks</TITLE> <H1>Bookmarks</H1> <DL> <p> ` let loop = (root) => { let str = '' root.forEach((item) => { if (item.folder) { str += ` <DT> <H3 ${item.toolbar ? `PERSONAL_TOOLBAR_FOLDER="true"` : ''}>${item.name}</H3> <DL> <p> ` str += loop(item.children) str += ` </DL> <p> ` } else { str += ` <DT><A HREF="${item.url}">${item.name}</A> ` } }) return str } str += loop(bookmarks) str += ` </DL> <p> ` return str}ES6之前的就须要显式的拼接上换行符：
function createBookmarksStr (bookmarks) { var str = '<!DOCTYPE NETSCAPE-Bookmark-file-1>\n<!-- This is an automatically generated file.It will be read and overwritten.DO NOT EDIT! -->\n<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html; charset=UTF-8\">\n<TITLE>Bookmarks</TITLE>\n<H1>Bookmarks</H1>\n<DL>\n\t<p>\n\t\t<DT>\n\t\t\t<H3 ADD_DATE=\"1568796074\" LAST_MODIFIED=\"1601707819\" PERSONAL_TOOLBAR_FOLDER=\"true\">\u4E66\u7B7E\u680F</H3>\n\t\t\t<DL>\n\t\t\t\t<p>\n\t\t\t\t\t' var loop = function (root) { var str = '' root.forEach(function (item) { if (item.folder) { str += '<DT>\n\t\t\t\t\t\t<H3 '+ (item.toolbar ? 'PERSONAL_TOOLBAR_FOLDER="true"' : '') +'>'+item.name+'</H3>\n\t\t\t\t\t\t<DL>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t' str += loop(item.children) str += '</DL>\n\t\t\t\t\t\t<p>\n\t\t\t' } else { str += '<DT><A HREF=\"'+item.url+'\">'+item.name+'</A>\n\t\t\t\t\t\t\t\t' } }) return str } str += loop(bookmarks) str += '</DL>\n\t\t\t<p>\n</DL>\n<p>' return str}看完了如何生成，接下来看一下如何解析，解析和拼接相似，也是通过深度优先进行遍历，只是会有一些特色判断。字符串如何转化成一棵树，最简略的必定是先转换为DOM元素，而后再通过操作DOM的api来进行遍历，有一些库能够用来做这件事，不过这里间接用的是iframe：
function getBookmarksStrRootNode (str) { // 创立iframe let iframe = document.createElement('iframe') document.body.appendChild(iframe) iframe.style.display = 'none' // 增加书签dom字符串 iframe.contentWindow.document.documentElement.innerHTML = str // 获取书签树根节点 return iframe.contentWindow.document.querySelector('dl')}function analysisBookmarksStr(str) { let root = getBookmarksStrRootNode(str)}看一下转换的后果：
书签DOM字符串：
转换后的DOM节点：
获取到书签树的根节点，接下来递归遍历即可：
function walkBookmarksTree (root) { let result = [] // 深度优先遍历 let walk = (node, list) => { let els = node.children if (els && els.length > 0) { for (let i = 0; i < els.length; i++) { let item = els[i] // p标签或h3标签间接跳过 if (item.tagName === 'P' || item.tagName === 'H3') { continue } // 文件夹不必创立元素 if (item.tagName === 'DL') { walk(els[i], list) } else {// DT节点 let child = null // 判断是否是文件夹 let children = item.children let isDir = false for(let j = 0; j < children.length; j++) { if (children[j].tagName === 'H3' || children[j].tagName === 'DL') { isDir = true } } // 文件夹 if (isDir) { child = { name: item.tagName === 'DT' ? item.querySelector('h3') ? item.querySelector('h3').innerText : '' : '', folder: true, children: [] } walk(els[i], child.children) } else {// 书签 let _item = item.querySelector('a') child = { name: _item.innerText, url: _item.href } } list.push(child) } } } } walk(root, result) return result}function analysisBookmarksStr(str) { let root = getBookmarksStrRootNode(str) let result = walkBookmarksTree(root)}最初解析的后果：
搞定出工，连忙去试试吧。