（六）选项卡的设置

来源：互联网发布：人工智能导弹编辑：程序博客网时间：2024/06/13 03:23

指定options_page属性后，扩展图标上的右键菜单会包含“选项”链接

对于网站来说，用户的设置通常保存在Cookies中，或者保存在网站服务器的数据库中。
对于JavaScript来说，一些数据可以保存在变量中，但如果用户重新启动浏览器，这些数据就会消失。
那么如何在扩展中保存用户的设置呢？
我们可以使用HTML5新增的localStorage接口
localStorage是HTML5新增的方法，它允许JavaScript在用户计算机硬盘上永久储存数据（除非用户主动删除）。
- 但localStorage也有一些限制，首先是localStorage和Cookies类似，都有域的限制，运行在不同域的JavaScript无法调用其他域localStorage的数据
- 其次是单个域在localStorage中存储数据的大小通常有限制（虽然W3C没有给出限制），对于Chrome这个限制是5MB
- 最后localStorage只能储存字符串型的数据，无法保存数组和对象，但可以通过join、toString和JSON.stringify等方法先转换成字符串再储存
- 通过声明unlimitedStorage权限，Chrome扩展和应用可以突破这一限制
小项目查天气
manifest

{    "manifest_version": 2,    "name": "天气预报",    "version": "1.0",    "description": "查看未来两周的天气情况",    "icons": {        "16": "images/icon16.png",        "48": "images/icon48.png",        "128": "images/icon128.png"    },    "browser_action": {        "default_icon": {            "19": "images/icon19.png",            "38": "images/icon38.png"        },        "default_title": "天气预报",        "default_popup": "popup.html"    },    "options_page": "options.html",    "permissions": [        "http://api.openweathermap.org/data/2.5/forecast?q=*"    ]}

options.html

<html>    <head>        <title>设定城市</title>    </head>    <body>        <input type="text" id="city" />        <input type="button" id="save" value="保存" />        <script src="js/options.js"></script>    </body></html>

options.js
localStorage的读取和写入方法很简单，和JavaScript中的变量读写方法类似。
localStorage除了使用localStorage.namespace的方法引用和写入数据外，还可以使用localStorage[‘namespace’]的形式。
请注意第二种方法namespace要用引号包围，单引号和双引号都可以。如果想彻底删除一个数据，可以使用localStorage.removeItem('namespace')方法

var city = localStorage.city || 'beijing';document.getElementById('city').value = city;document.getElementById('save').onclick = function(){    localStorage.city = document.getElementById('city').value;    alert('保存成功。');}

popu.html
其中id为weather的div元素将用于显示天气预报的结果

<html><head><style>* {    margin: 0;    padding: 0;}body {    width: 520px;    height: 270px;}table {    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;    font-size: 12px;    width: 480px;    text-align: left;    border-collapse: collapse;    border: 1px solid #69c;    margin: 20px;    cursor: default;}table th {    font-weight: normal;    font-size: 14px;    color: #039;    border-bottom: 1px dashed #69c;    padding: 12px 17px;    white-space: nowrap;}table td {    color: #669;    padding: 7px 17px;    white-space: nowrap;}table tbody tr:hover td {    color: #339;    background: #d0dafd;}</style></head><body><div id="weather"></div><script src="js/weather.js"></script></body></html>

weather.js

function httpRequest(url, callback){    var xhr = new XMLHttpRequest();    xhr.open("GET", url, true);    xhr.onreadystatechange = function() {        if (xhr.readyState == 4) {            callback(xhr.responseText);        }    }    xhr.send();}function showWeather(result){    result = JSON.parse(result);    var list = result.list;    var table = '<table><tr><th>日期</th><th>天气</th><th>最低温度</th><th>最高温度</th></tr>';    for(var i in list){        var d = new Date(list[i].dt*1000);        table += '<tr>';        table += '<td>'+d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+'</td>';        table += '<td>'+list[i].weather[0].description+'</td>';        table += '<td>'+Math.round(list[i].temp.min-273.15)+' °C</td>';        table += '<td>'+Math.round(list[i].temp.max-273.15)+' °C</td>';        table += '</tr>';    }    table += '</table>';    document.getElementById('weather').innerHTML = table;}var city = localStorage.city;city = city?city:'beijing';var url = 'http://api.openweathermap.org/data/2.5/forecast/daily?q='+city+',china&lang=zh_cn';httpRequest(url, showWeather);

tips:
小提示：无论是options.js还是weather.js中都有如下语句：

var city = localStorage.city;city = city?city:'beijing';

也就是说，当选项没有值时，应设定一个默认值，以避免程序出错。此处如果用户未设置城市，扩展将显示北京的天气预报。

0 0