当前位置: 移动技术网 > IT编程>开发语言>JavaScript > NodeJS开发学习之JS本地保存数据的几种方法介绍

NodeJS开发学习之JS本地保存数据的几种方法介绍

2018年10月05日  | 移动技术网IT编程  | 我要评论

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;
        }
    }

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);

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网