H5本地存储技术和cookie

2019-06-10  本文已影响0人  demo_2ebd

    1.sessionStorage(会话存储)

        ---生命周期:浏览器从关闭到打开的这段时间

        ----大小: 5M

        ----保存的位置:浏览器端

        -----setItem('key',value):保存数据到浏览器

        -----getItem('key'):获取保存的数据

        -----removeItem('key'):删除对应的数据

2.localStorage(永久存储)

---生命周期:浏览器从关闭到打开的这段时间

----大小: 5M甚至更大

----保存的位置:浏览器端

-----setItem('key',value):保存数据到浏览器

-----getItem('key'):获取保存的数据

-----removeItem('key'):删除对应的数据

3.cookie

----作用:由于浏览器和服务器进行通信

----大小 :4kb

----每次发送请求都携带,导致占用带宽

----保存在浏览器端

----cookie容易被截获,不安全

----生命周期:

        会话cookie:浏览器从打开到关闭的过程

        永久cookie:人为设置的一段时间

一二项可通过F12--Application查看

$scope.save =function () {

//$scope.message为用户输入的数据

    //保存时一般先转换为json对象

    localStorage.setItem("note_key",JSON.stringify($scope.message))

}

$scope.save =function () {

//$scope.message为用户输入的数据

    //保存时一般先转换为json对象

    localStorage.setItem("note_key",JSON.stringify($scope.message))

}

$scope.read =function () {

//注意处理缓存不存在的情况

    $scope.message = JSON.parse(localStorage.getItem("note_key") ||'[]');

}

//删除缓存

$scope.remove =function () {

localStorage.removeItem("note_key");

    $scope.message ="";

}

上一篇下一篇

猜你喜欢

热点阅读