Web存储与JSON操作

日子很长
107 阅读9分钟

一、Web客户端的三种存储方式及应用场景

1. cookie 小量存储

cookie是小甜饼的意思，所以它也确实非常的小，大小限制在4KB左右。主要用来保存登录信息，如在登录某个网站时，会出现“记住密码”，这通常就是通过在cookie中存入一段辨别用户身份的数据来实现的。

在H5之前，cookie是主要的存储方式，它可以兼容到包括ie6以上所有的浏览器；与服务器端通讯时，cookie数据会带到请求头的cookie字段里面，每次同主域名的请求中，都会传递数据，增加了网络请求的数据量，会带来性能问题；并且还会造成主域的污染；还有就是cookie在不同浏览器上数量和大小都有限制（具体限制和数量百度）

cookie的生命周期：cookie一般由服务器生成 ，可设置失效时间；如果在浏览器端生成cookie，默认是关闭浏览器后失效；

cookie的操作比较麻烦，需要自己写操作函数来实现操作。

以上种种可以看出，cookie不适合大量数据的存储，因为他们由每个服务器的请求来传递，使得cookie速度很慢而且效率也不高；这样，在HTML5中，就提供来两种在客户端存储数据的新方法：

localStorage 没有时间限制的数据存储

sessionStorage 针对一个session（会话）的数据存储

这两种数据都不是由每个服务器请求传递的，而是只有在请求时使用数据，它使 在不影响网站性能的情况下存储 大量数据成为可能。

对于不同网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据；

cookie格式： key = value

浏览器查看 地址栏前面感叹号，或设置内通过document.cookie来设置和读取cookie，例：

document.cookie = "name = Jack"; //创建和修改cookie
var getCookie = document.cookie; console.log(getCookie)//创建变量接收读取到的cookie值，并打印
cookie过期时间设置：通过添加expires设置过期时间
document.cookie = "name=;expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意：cookie设置的过期时间是以服务器时间为基准,在浏览器得到服务器的任何HTTP响应头后会将浏览器的时间与服务器同步，而使用new Date()获取的本地时间并不准确，与服务器相差很大，本地时间可被客户修改，如果cookie使用本地时间可被人利用实现永久免登陆验。

2. localStorage 永久级别的存储

存储在用户本地的浏览器上，不像cookie一样携带在http请求头部的字段里面，这有效的节约了带宽。localStorge同样也采用了 同源策略对存储的容量进行了限制，一般限制为同一域名5M，并且不同域名的数据不能相互访问。

  • localStorage存储的数据没有时间限制，除非被开开发者手动清除，否则永久保存
  • localstorage是以key-value的形式进行存储的，H5封装好了localstorage的属性及方法如下：
  • localstorage.length 获取当前存储的键值对数量
  • localstorage.key(n) 获取第n项的键值
  • localstorage.setItem(key,value) 设置对应的键值对
  • localstorage.getItem(key) 获取对应键值的数据
  • localstorage.removeItem(key) 清除某个数据
  • localstorage.clear() 清除存储的所有数据

localStorage除了通过以上H5封装好的方法进行设置和获取，还可以像普通对象一样用点(.)操作符 或 [] 进行数据的设置和获取

例：以animal名字将json串catStr存储到localStorage中

localStorage.animal = catStr; 
或
localStorage["animal"] = catStr;

localstorage存储的值只能是字符串的形式，当我们存储数据为引用对象的时候，会默认调用对象的toString方法，转化为字符串在存储。所以我们在存储数组时，存储的数据会将数据项以,隔开，解析的时候需要我们分解成为数组再操作。而对于对象，我们需要用JSON.stringify转化存储，获取数据后再用JSON.parse转化为对象查看localStorage方法 : 开发者工具 → Application → Storage → Local Storage。

3. sessionStorage 会话级别的存储，页面关闭即消失

sessionStorage与localStorage 的接口类似，但保存数据的生命周期与 localStorage不同,它可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

sessionStorage方法及属性的介绍：同 localStorage

4. 三者应用场景:

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了

另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

localStroage有5M的容量可以存储，所以可以存储一些不需要和服务器进行交互的一些数据。比如导航栏当前的状态，一些普通的数据进行缓存。甚至我们可以存储html片段，js或者css文件段。由于现在手机端对于localstroage的支持已经非常完善，有很多应用通过版本控制来存储一些不经常改动的js/css文件。减少用户请求带宽的同时优化整个页面的加载速度。

5. localStrorage与sessionStrorage是html5的一个新对象，用来进行本地的存储，当前所有主流浏览器都支持，但是低版本不支持

localStrorage与sessionStorage用法与方法基本一致

localStrorage与sessionStrorage区别如下：

  • session本身的意思是会话，因此sessionStrorage的生命周期也是会话级别的，当窗口或页面关闭后，sessionStrorage会被

删除；其作用域仅仅局限在窗口页面中，这样两个标签页的sessionStrorage对象是不同的、数据不能共享

  • localStorage存储是永久的，除非我们手动调用方法localStorage.clear()或通过浏览器的选项进行删除，

6. Web Storage带来的好处：

  • 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
  • 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
  • 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

二、JSON数据格式及与对象之间的转换：

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值：{"pId":"0001","pName":"花木扶疏","pAge":"23"}

JSON 与 JS 对象的关系：JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。如

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

JSON字符串与对象之间的转换方法：

JSON.stringfy(obj) 将一个对象转换成字符串形式
JSON.parse(str) 将一个字符串转换成对象
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}

在 JS 语言中，一切都是对象。因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。

对象： 对象在 JS 中是使用花括号包裹 {} 起来的内容，数据结构为 {key1：value1, key2：value2, ...} 的键值对结构。在面向对象的语言中，key 为对象的属性，value 为对应的值。键名可以使用整数和字符串来表示。值的类型可以是任意类型。

数组： 数组在 JS 中是方括号 [] 包裹起来的内容，数据结构为 ["java", "javascript", "vb", ...] 的索引结构。在 JS 中，数组是一种比较特殊的数据类型，它也可以像对象那样使用键值对，但还是索引使用得多。同样，值的类型可以是任意类型。

avatar
文章
阅读
粉丝