vue.js-----储存方式&JSON转换

储存方式

01-cookie

一:使用场景:
1:记住密码,下次自动登录。
2:记录用户浏览数据,进行商品(广告)推荐。

二:特点:
1:cookie保存在浏览器端。
2:单个cookie保存的数据不能超过4KB。
3:cookie中的数据是以域名的形式进行区分的。
4:cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。
5:cookie中的数据会随着请求被自动发送到服务器端。

三:
由于cookie存储机制有很多缺点，HTML5不再使用它,
转而使用改良后的WebStorage存储机制。(localStorage和sessionStorage)

SessionStorage的生命周期
SessionStorage生命周期为当前窗口或标签页。
一旦窗口或标签页被永久关闭了，那么所有通过Session存储的数据也就被清空了。

02-localstorage

在HTML5中,新加入了一个localStorage特性,这个特性主要用来作为本地存储来使用。
1它解决了cookie存储空间不足的问题,每条cookie的存储空间为4K,localStorage一般为5M。
2.localStorage的生命周期
LocalStorage生命周期是永久，这意味着除非用户在显示在浏览器提供的UI上清除localStorage信息,
否则这些信息将永久存在。
3.localStorage的局限
a.在IE8以上的IE版本才支持localstorage这个属性。
b.目前所有的浏览器中都会被localStorage的值类型限定为string类型，
对我们日常比较常见的JSON对象类型需要一个转换。

判断浏览器是否支持localstorage这个属性

if (window.localstorage) {
  alert('浏览器支持localStorage')
}

localstorage的写入

 if (!window.localStorage) {
   alert('浏览器不支持localStorage')
 } else{
   var storage = window.localStorage;

写入a字段

写入b字段

写入c字段

storage['a'] = 1;

storage.b = 2;

storage.setItem('c', 3)

打印结果

console.log(typeof storage['a']); //string 
console.log(typeof storage['b']); //string 
console.log(typeof storage['c']); //string

JSON转换

01-JSON字符串

JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。

这个一个对象

var obj = { a: "hello", b: "world" }; 
console.log(typeof (obj)); //object

这个一个JSON字符串,本质是一个字符串

var json = '{"a":"hello", "b":"world"}';
 console.log(typeof (json)); //string

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // JSON和JS对象的关系
    // JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。
    // 这个一个对象
    var obj = { a: "hello", b: "world" }; 
    console.log(typeof (obj)); //object

    // 这个一个]SON字符串,本质是一个字符串
    var json = '{"a":"hello", "b":"world"}';
     console.log(typeof (json)); //string
  </script>
</body>

</html>

02-JSON和JS对象互换

JSON.parse()方法 JSON字符串转换为JS对象

 var obj = JsoN.parse('{"a":"hello", "b":"world"}')
 console.log(obj); //object

JSON.stringify()方法实现从JS对象转换为JSON字符串

var json = JSON.stringify({ a: "hello", b: "world" })
console.log(json);

vue.js-----储存方式&JSON转换

猜你喜欢