正如上面的內容中所提到的，文件保存選取器用於保存文件，通過Windows.Storage.Pickers命名空間中的FileSavePicker類的pickSaveFileAsync函數可以向指定的文件系統位置中保存一個文件。文件保存之后，還可以對其進行讀寫操作，如果是向文件中寫入內容，可以使用Windows.Storage.FileIO類中的writeTextAsync(file, contents)函數或appendTextAsync(file,contents)函數來實現，參數file表示需要向其中寫入內容的文件，contents代表要寫入的內容，writeTextAsync函數會將新寫入的內容代替文件原來的內容，而appendTextAsync函數是把新內容追加到原來的內容上。如果要從文件中讀取內容，可以使用FileIO類中的readTextAsync(file)函數來實現，參數file表示需要被讀取的文件。
下面以一個應用程序為例來演示如何對文件進行讀寫操作，這個應用程序可以實現保存一個文件，也可以向文件中寫入內容和讀取其中的內容。
新建一個JavaScript的Windows應用商店的空白應用程序項目，將其命名為FileAccessApplication。打開default.html文件，在body元素中添加兩個div元素，並在第一個div元素中添加一個h2元素、一個文本區和三個按鈕，其中h2元素用來顯示頁面標題"寫入和讀取文件示例"，文本區用來編輯向文件中寫入的內容，三個按鈕為"新建一個文件"、"寫內容"和"讀內容"，分別用於新建文件、向文件中寫入內容和讀取文件中的內容；在第二個div元素中添加兩個p元素，其中一個用來顯示提示信息，另一個用於顯示已讀取的文件內容。相應的HTML代碼片段如下所示：
<body>
<div>
<h2 class="articleTitle">寫入和讀取文件示例</h2>
<textarea rows="5" cols="10" id="textareaID"></textarea>
<br />
<button id="createFileButton" class="action1">新建一個文件</button>
<button id="writeFileButton" class="action2">寫內容</button>
<button id="readFileButton" class="action3">讀內容</button>
<br />
</div>
<div>
<p id="notice"></p>
<p id="readText"></p>
</div>
</body>
在上面的代碼中，為了便於設計CSS樣式和檢索控件，在添加控件時為其設置了類名和ID。其中，設置"新建一個文件"、"寫內容"和"讀內容"三個按鈕的class屬性值分別為action1、action2和action3，id屬性值分別為createFileButton、writeFileButton和readFileButton，並設置h2元素的class屬性值為articleTitle，同時設置textarea控件和兩個p元素的id屬性值分別為textarea ID、notice和readText。
為了控制應用程序界面的顯示外觀，在default.css文件中添加如下代碼來控制default.html頁面的布局。
/*設置h2元素在應用程序界面中的顯示位置*/
.articleTitle {
margin: 20px 15px 10px 70px;
}
/*設置textarea控件在界面中的顯示位置*/
#textareaID {
margin: 20px 15px 10px 50px;
}
/*設置"新建一個文件"按鈕和兩個p元素在界面中的顯示位置*/
.action1, #notice, #readText {
margin: 20px 15px 10px 30px;
}
/*設置"寫內容"按鈕在界面中的顯示位置*/
.action2 {
margin: 20px 15px 10px 0px;
}
完成前台界面的布局后，應用程序界面效果如圖19-19所示。
圖19-19 前台界面效果圖
布局好前台界面后，接下來介紹如何新建一個文件、向文件中寫入內容以及讀取文件中的內容。雙擊打開default.js文件，首先定義一個temporaryFile變量並初始化為null，用於保存新建的文件，以便對其進行讀寫操作，同時定義一個命名空間NameSpaceSample，並把temporaryFile變量添加到命名空間NameSpaceSample內。代碼如下所示：
var temporaryFile = null;
WinJS.Namespace.define("NameSpaceSample", {
sampleFile: temporaryFile
});
在上面的代碼中，將sampleFile指定為temporaryFile變量的別名，這樣就可以通過命名空間和別名來引用temporaryFile變量，引用方法是NameSpaceSample.sampleFile。
下面在"args.setPromise(WinJS.UI.processAll());"語句后添加如下代碼，分別為"新建一個文件"按鈕、"寫內容"按鈕和"讀內容"按鈕注冊click事件處理函數。
document.getElementById("createFileButton").addEventListener("click", CreateFile);
document.getElementById("writeFileButton").addEventListener("click", WriteFile);
document.getElementById("readFileButton").addEventListener("click", ReadFile);
首先以"createFileButton"為參數調用document對象的getElementById函數來查找id屬性值為createFileButton的元素對象，並調用addEventListener函數為該元素對象的click事件注冊事件處理函數CreateFile，之后通過相同的方法為id屬性值分別為writeFileButton和readFileButton的元素對象注冊名為WriteFile和ReadFile的click事件處理函數。下面分別來介紹事件處理函數CreateFile、WriteFile和ReadFile的實現代碼。
CreateFile函數用來處理"新建一個文件"按鈕的單擊事件，實現新建一個文件。該函數的代碼添加在default.js文件的"app.onactivated = function (args) {...};"語句后，對應的JavaScript代碼片段如下所示：
function CreateFile() {
// 首先判斷應用程序是否能夠調用文件選取器
var currentState = Windows.UI.ViewManagement.ApplicationView.value;
if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&
!Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
//如果文件選取器調用失敗，則直接退出程序
return;
}
//新建一個文件保存選取器對象
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
//將文件保存選取器的起始位置設置為文檔庫
savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
// 設置文件類型篩選
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
savePicker.fileTypeChoices.insert("Word Document", [".doc"]);
savePicker.fileTypeChoices.insert("Word Document", [".docx"]);
// 設置文件的默認名稱
savePicker.suggestedFileName = "New Document";
//調用pickSaveFileAsync函數來創建文件
savePicker.pickSaveFileAsync().then(function (file) {
//判斷文件是否創建成功
if (file) {
//如果創建成功，給出相應的成功信息
notice.innerText = "文件 '" + file.name + "' 創建成功.";
//並將創建的文件保存到NameSpaceSample.sampleFile中，以便對其進行讀寫操作
NameSpaceSample.sampleFile = file;
} else {
//在文件選取器界面中，未創建文件而提前結束了操作
notice.innerText = "沒有創建文件，操作取消了！";
}
});
}
在上面的代碼中，首先通過Windows.UI.ViewManagement.ApplicationView.value獲取應用程序的當前狀態，如果應用程序正處於貼靠狀態而且嘗試取消貼靠失敗，那么就不能顯示文件選取器，程序停止向下執行。否則新建一個FileSavePicker類的對象savePicker作為文件保存選取器，通過savePicker對象的suggestedStartLocation屬性設置文件保存選取器的起始位置為文檔庫，並使用fileTypeChoices屬性獲得選取器能夠顯示的文件類型集合，通過insert函數將.txt、.doc和.docx三種文件類型添加到集合中，接着使用suggestedFileName屬性設置文件的默認名稱為"New Document"。最后調用savePicker對象的pickSaveFileAsync函數來保存文件，pickSaveFileAsync函數調用完成之后定義一個匿名函數，在匿名函數中對參數file進行判斷，如果file不是空對象，說明成功地創建了一個文件，那么在應用程序界面中顯示相應的提示信息，並將file文件保存到NameSpaceSample.sampleFile中，如果file為空對象，說明沒有創建文件，則在應用程序界面中顯示"沒有創建文件，操作取消了！"。
WriteFile函數用來處理"寫內容"按鈕的單擊事件，實現向剛創建的文件中寫入內容。該函數的代碼添加在CreateFile函數后，對應的JavaScript代碼片段如下所示：
function WriteFile() {
if (NameSpaceSample.sampleFile!== null) {
//從文本區中獲取要向文件中寫入的內容
var textArea = document.getElementById("textareaID");
var userContent = textArea.innerText;
//把獲取到的文本內容寫入文件中，並根據操作結果給出相應的提示信息
if (userContent !== "") {
Windows.Storage.FileIO.appendTextAsync(NameSpaceSample.sampleFile, userContent).done(function () {
//成功地向文件中寫入內容
notice.innerText = "文本區中的內容已經被寫到文件 '" + NameSpaceSample.sampleFile.name + "' 中了.";
});
}
else {
//寫入空內容
notice.innerText = "文本區中的內容是空的，請先輸入內容，然后再單擊 '寫內容' 按鈕將內容寫入到文件中！";
}
}
else {
//未先創建文件，就進行了寫操作
notice.innerText = "文件還不存在，請先創建文件！";
}
}
代碼中對NameSpaceSample.sampleFile進行判斷，如果NameSpaceSample.sampleFile是空對象，說明要向其中寫入內容的文件不存在，則在應用程序界面中顯示"文件還不存在，請先創建文件！"。如果NameSpaceSample.sampleFile不是空對象，說明文件已經存在，那么以"textareaID"為參數調用document對象的getElementById函數來查找id屬性值為textareaID的元素對象，並賦值給變量textArea，通過textArea變量調用該元素對象的innerText屬性來獲取要向文件中寫入的內容，保存到變量userContent中，並對userContent變量進行判斷，如果變量userContent為空，則在應用程序界面中顯示"文本區中的內容是空的，請先輸入內容，然后再單擊 '寫內容' 按鈕將內容寫入到文件中！"，如果變量userContent不為空，則以NameSpaceSample.sampleFile和userContent為參數調用FileIO類的appendTextAsync函數將內容userContent寫入到文件NameSpaceSample.sampleFile中。appendTextAsync函數調用完成后定義一個匿名函數，用於在應用程序界面中顯示相應的提示信息。
ReadFile函數用來處理"讀內容"按鈕的單擊操作，實現從文件中讀取內容。該函數的代碼添加在WriteFile函數后，相應的JavaScript代碼片段如下所示：
function ReadFile() {
if (NameSpaceSample.sampleFile!== null) {
//從文件中讀取內容，並根據操作結果給出相應的提示信息
Windows.Storage.FileIO.readTextAsync(NameSpaceSample.sampleFile).done(function (fileContent) {
if(fileContent === ""){
//空文件，給出相應的提示信息
notice.innerText = "文件中的內容是空的！"
}else{
//文件不空，也給出相關的提示信息並顯示讀取的內容
notice.innerText = "文件 '" + NameSpaceSample.sampleFile.name + "'中的內容為:";
readText.innerText = fileContent;}
});
}
}
在上面的代碼中，先對NameSpaceSample.sampleFile進行判斷，如果NameSpaceSample.sampleFile不是空對象，說明要讀取的文件存在，那么以NameSpaceSample.sampleFile為參數調用FileIO類的readTextAsync函數來從文件NameSpaceSample.sampleFile中讀取內容，readTextAsync函數調用完成后定義一個匿名函數，在這個匿名函數中對參數fileContent進行判斷，如果fileContent為空，則將id屬性值為notice的元素對象的innerText屬性賦值為"文件中的內容是空的！"，如果fileContent不為空，將fileContent賦值給id屬性值為readText的元素對象的innerText屬性，從而在應用程序界面中顯示讀取的文件內容。
啟動調試，單擊"新建一個文件"按鈕，會顯示文件選取器窗口，這里在文檔庫中采用默認名稱新建一個文本文件，如圖19-20所示。文件的類型和名稱確定之后，單擊"保存"按鈕，會返回到應用程序界面，界面中會顯示"文件 'New Document.txt' 創建成功."，這樣就成功創建並保存了這個文件。然后，在文本區中輸入"這是一個新建文件、寫入和讀取文件的例子。"，單擊"寫內容"按鈕，就將文本區中的內容寫入到了剛才創建的文件中，同時界面上會顯示提示信息"文本區中的內容已經被寫到文件 'New Document.txt' 中了."，效果如圖19-21所示。如果想讀取文件中的內容，單擊"讀內容"按鈕，文件中的內容就會顯示在界面下方，效果如圖19-22所示。
圖19-20 文件選取器界面
圖19-21 成功向文件中寫入內容的效果
圖19-22 成功讀取文件內容的效果