JavaScript利用Cookie保存所设置网页的字体大小

最近日本地震灾害比较严重,有些朋友可能会关注日本的网络媒体多一些,大家发现日本的网站很多都有字体大小的设置,分为“大”、“中”、“小”3个等级,这个对于视力不佳者可谓福音,也免去了调整浏览器字体大小之苦,但是如何让网站记住用户设置的字体大小呢,这时我们就需要本地存储了,在这里我们就用到前一篇文章《JavaScript本地存储(1) : 使用Cookie》讲解的Cookie类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
<style type="text/css">
body {
  font-size:75%;
}
p {
  font-size:1.2em;
}
.fontset a{
  font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascript">
// 这里放《JavaScript本地存储(1) : 使用Cookie》的Cookie类代码
 
var myCookie = new Cookie();
 
function loadFontSize() {
  document.body.style.fontSize=(myCookie.getItem("fontsize"));
}
 
function setFontSize(value) {
  myCookie.setItem("fontsize", value);
  loadFontSize();
}
 
window.onload = function(){
  loadFontSize();
}
</script>
<div class="fontset">
<a href="javascript:setFontSize('120%')"></a>
<a href="javascript:setFontSize('100%')"></a>
<a href="javascript:setFontSize('75%')"></a>
</div>
<p>我是内容</p>
</body>
</html>

大家可以看到,设置字体的办法是通过设置style的fontSize属性,当然这里我们通过CSS将body的字体默认为75%这样的百分比大小,然后通过设置内容的font-size字体大小为指定em为单位的数值大小就可以了,然后我们可以通过调整body的font-size的百分比来控制整体字体大小,当然对于字体固定为px像素大小的只能调整相应的像素值了,因为百分比对像素值的字体大小不起作用,这也就是为什么有些网站无法通过浏览器上的调整字体大小来调整的原因,当然这个像素大小字体的作用可以用来固定我们的“大”、“中”、“小”三个链接的字体大小,避免它们也随着整体百分比的改变而字体变化。

JavaScript本地存储(1) : 使用Cookie

在网页开发中,为了某些特殊的效果比如像购物车、页面换肤、记住密码等等就可能需要用到JavaScript的本地存储功能,说到底JavaScript的本地存储就是让网站能够“记住”你,等到下次再访问的时候能够识别出来,当然记住的方式无外乎就是通过在浏览者的电脑上保存一个记录的文件。本系列文章主要讲解这些技术,当然我们实现约定一个类似于下面的接口:

1
2
3
4
5
var IStorage = function() {
  this.setItem = function(key, value) {}
  this.getItem = function(key) {}
  this.remove = function(key) {}
}

下面的编程实现将围绕在这个接口展开,关于为什么定义这个接口,我将在下面的文章中阐述。

说到Cookie(也可以叫做Cookies)大家可能比较熟悉,这可以是最早实现本地存储的一个方法之一了,实现也非常简单。基于IStorage我们实现了下述关于Cookie类的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var Cookie = function() {
  this.setItem = function(key, value) {
    var expires = new Date();
    expires.setTime(expires.getTime() + 
            1000 * 60 * 
            60 * 24 * 365);
 
    document.cookie = key + "=" + 
            escape(value) + 
            ";path=/" + 
            "; expires=" + 
            expires.toGMTString();
  }
 
  this.getItem = function(key) {
    var key_equal = key + "=";
    if (document.cookie.length <= 0)
      return "";
    var pos_start = document.cookie.
            indexOf(key_equal);
    if (pos_start == -1)
      return "";
    pos_start += key_equal.length;
    pos_end = document.cookie.
          indexOf(";", pos_start);
    if (pos_end == -1)
      pos_end = document.cookie.length;
 
    return unescape(document.cookie.
            substring(pos_start, pos_end));
  }
 
  this.remove = function(key) {
    this.setItem(key, "");
  }
}

可以看出每个Cookie由key和value这样的键值对组成,而且在这之间以分号相隔,形如key1=value1;key2=value2;等等,当然操作cookie可以通过document.cookie进行,然后我们所做的其实是文本分析,比如如何根据key获得等于号后面的value。

好了,下面的一篇文章我将会给大家展示一个例子,讲解Cookie的使用方法。

Javascript取得URL传递的参数

如何使用Javascript取得URL传递的参数,也就是login.html?name=wangye在login.html取得name等于的值。对于动态网页这点很容易办到,比如ASP就可以通过Request.QueryString(“name”)的方法,但是对于Javascript则有点小麻烦。我一般参考布鲁斯狼(cnBruce)《在HTML网页中巧用URL》 讲解的办法。近日在一次分析联想网页上的某个效果时发现其中也实现了这个功能,不过其是使用正则实现的,感觉比较简洁,故分享给大家。

1
2
3
4
5
6
7
8
9
10
11
function gup( name ) {
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );
    if( results == null ) {
        return "";
    } else {
        return results[1];
    }
}

使用方法比如要获取login.html?name=wangye传递的wangye,只要在login.html这样调用document.write(gup(“name”));这样页面就会显示name=后面的值。