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

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

在网页开发中,为了某些特殊的效果比如像购物车、页面换肤、记住密码等等就可能需要用到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的使用方法。

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!
请稍后...

发表评论

电子邮件地址不会被公开。 必填项已用*标注