【NodeJS开发日记(7)】——JS本地保存数据的几种方法

【转自https://blog.csdn.net/darrenzzb66/article/details/73012577】

1.Cookie 

这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了。COOKIE优点很多,使用起来很方便 
但它的缺点也很多: 
比如跨域访问问题;无法保存太大的数据(最大仅为4KB);本地保存的数据会发送给服务器,浪费带宽 等等;
代码如下

    function SetCookie(name, value) {
        var key = '';
        var Days = 2;
        var exp = new Date();
        var domain = "";
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
        if (key == null || key == "") {
            document.cookie = name + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
        }
        else {
            var nameValue = GetCookie(name);
            if (nameValue == "") {
                document.cookie = name + "=" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
            }
            else {
                var keyValue = getCookie(name, key);
                if (keyValue != "") {
                    nameValue = nameValue.replace(key + "=" + keyValue, key + "=" + encodeURI(value));
                    document.cookie = name + "=" + nameValue + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
                }
                else {
                    document.cookie = name + "=" + nameValue + "&" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;" + domain + ";";
                }
            }
        }
    }

    function GetCookie(name) {
        var nameValue = "";
        var key = "";
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg)) {
            nameValue = decodeURI(arr[2]);
        }
        if (key != null && key != "") {
            reg = new RegExp("(^| |&)" + key + "=([^(;|&|=)]*)(&|$)");
            if (arr = nameValue.match(reg)) {
                return decodeURI(arr[2]);
            }
            else return "";
        }
        else {
            return nameValue;
        }
    }
  • 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
  • 42
  • 43
  • 44
  • 45
  • 46

2.使用sessionStorage、localStorage 
localStorage: 
是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使你关闭了客户端(浏览器),属于本地持久层储存 
sessionStorage: 
用于本地存储一个会话(session)中的数据,一旦会话关闭,那么数据会消失,比如刷新。 
有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有: 
1 缓存数据 
2 减少对内存的占用 
但是,storage只能存储字符串的数据,对于JS中常用的数组或对象却不能直接存储。 
它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。

localStorage存储方法(sessionStorage类似) 
localStorage.name =’vanida; 
localStorage[“name”]=’vanida’; 
localStorage.setItem(“name”,”vanida”); 
//这三种设置值方式是一样的; 
localStorage获取值方法 
var name = localStorage[“name”] 
var name= localStorage.name 
var name= localStorage.getItem(“name”); 
//这三种获取值方式是一样的; 
localStorage清除特定值方法 
//清除name的值 
localStorage.removeItem(“name”); 
localStorage.name=”; 
localStorage清除所有值方法 
localStorage.clear() 
localStorage只能存储字符串,如果需要存储对象,首先要转化为字符串。利用JSON.stringify(); 
var person = {name:”vanida”,”sex”:”girl”,”age”:25}; 
localStorage.setItem(“person”,JSON.stringify(person)); 
// localStorage.person=”{“name”:”vanida”,”sex”:”girl”,”age”:25}” 
注意:JSON.stringify()中不要忘了“i”,stringify而不是stringfy! 
然后取出person的对象你可以用JSON.parse(); 
person = JSON.parse(localStorage.getItem(“person”));

下面是单个简单的对象(数组类似)存贮,不考虑其他的多个的情况
var obj = { name:'Jim' }; 
var str = JSON.stringify(obj); 

//存入 
sessionStorage.obj = str; 
//读取 
str = sessionStorage.obj; 
//重新转换为对象 
obj = JSON.parse(str);

你可能感兴趣的:(前端)